5 features hidden in Chrome DevTools you may not be aware of

Dominika Zając
Level Up Coding
Published in
5 min readMar 27, 2021

--

Purple card with paper clip. There is a title “Chrome DevTools features you may not be aware of” and screenshot of ChromeDevTools screen.

Chrome Dev Tools are a set of super useful and powerful instruments for developers — if you created at least one page in your life you probably know that. Almost everyone knows how to check the HTML structure of the webpage or check CSS styling on there. But do you use the full potential hidden in there? Let’s check! Below I listed 5, not obvious, functions available in Dev Tools that I found super useful in my daily work— hope you’ll find them useful too.

Mocking location

A long, long time ago (before the coronavirus pandemic) people were traveling. It may be hard to believe but it was normal to just take a car/train/plane and visit new places. And geolocation in our mobile apps/webpages was necessary then. Of course, it’s not all — when we order food to our home offices geolocation is still super useful. As developers we know a lot of ways to implement — but how can we test if it works properly? The answer may be — just use your browser. How to do that?

  1. Open Chrome DevTools on the page you want to test (ctrl + shift + I on Linux/Windows or cmd + shift + I on Mac)
  2. Click 3 dots on the right side.
  3. Choose More Tools and Sensors
  4. Check Geolocation section.

As you can see you have a lot of options available here. You can choose one of the default places defined in the dropdown menu (like London, Berlin, or Shanghai) or define your own latitude and longitude. When you often use some location that is not available by default you can click Manage and Add location to add your custom place to presets. You can also check how your webpage behaves when some errors occurred and data are unavailable — it’s enough to choose theLocation unavailable option from the menu. Voila! It just works! You don’t need to drive around the city with a laptop on your knees or install some third-party software. Quite nice — don’t you think?

Paint flashing

--

--

Full-stack developer from Cracow, Poland. Google Developer Expert in Web. Passionate about a11y, best coding practices and singing.