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 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.
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?
Overriding location in Chrome DevTools in the app presenting air quality level.
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 the Location 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?
Who has never had a problem with re-rendering components too often, cast the first stone. It happens — it’s a fact. Especially when you are a junior or just entered the frontend world. Without experience that bugs are hard to detect — everything looks fine but the browser is working hard to repaint, repaint and repaint elements on the page. Fortunately, Chrome DevTools offers a way to easily found them. You just need to follow these steps:
Example of paint flashing — the repainted area is highlighted in green.
Thanks to that all repainted areas will be highlighted in green, so you can interact with a webpage and check if everything works are designed. Piece of cake! You don’t have to worry about having repainting problems on your webpage now.
One of my favorite features. Very often we work on our webpage and want to test it to confirm everything works like a charm. But we don’t know where to start and what is the most important. Also, we need some way to quantify it to be sure we are progressing with updates. And we can have all of that for free, without installing anything — just by using the browser. Steps to take?
Audits in Chrome DevTools
After some time and reload the page in the background, you will receive the calculated score. It’s on a scale of 0–100 where 100 means perfect webpage. But what is more, you will receive also detailed info — which exactly tests failed and passed and how you can improve your score. Failing elements on the webpage will be presented in the report, almost all sections also contain a link to an article to understand why it’s so important and how to improve that. The report can be also saved in JSON or HTML file so you can show your score to someone else or create a base version and compare the latest version with that one. It’s super useful! But you don’t have to trust me — try it by yourself!
Emulating color deficiencies
It’s really eye-opening, isn’t it? Test that option on many different webpages. The world looks completely different! There are many better options and tools to check accessibility on your page (including automatic audits described previously). But nothing will change until you start thinking about it during development or testing. I hope, that exercise will help you remember how important it is.
So small, so useful. Did you know that you don’t need additional software to take full-size or area screenshots while browsing the web? It’s enough to:
Screenshots in Chrome DevTools
It’s all! I know it’s small but to be honest I love that simple option to take screenshots of the full page — not only the visible part but everything without scrolling or additional tools.
Of course, it’s not a complete list of all features available in Chrome DevTools — if you want to learn more I can strongly recommend checking Chrome DevTools page by Google or their Twitter account. Opening the panel and just clicking between tabs and options is also a great approach — you may be surprised how many awesome tricks you can discover thanks to that! Happy coding!