Google Chrome is undoubtedly one of the most popular web browsers — used by over a billion users around the world. Apart from the users, it is the first choice of many developers as a consequence of the brilliant Chrome DevTools that help them debug and develop new websites. Most of you might be already familiar with Chrome DevTools, but by walking through this post you will get to know some additional tips and tricks that improve your productivity. Before heading towards the tips and tricks of Google Chrome DevTools, let us dig a little deeper and know what they are.
What are the Chrome DevTools?
Google Chome Developer Tools (or what they are simply called Chrome DevTools) are basically web authoring and debugging tools brought together right into the Chrome browser. With the help of these tools, devs can have deeper access to their web apps as well as the browser. Ranging from testing your viewport on a device to editing HTML/CSS on the go, these tools help you perform everything. You can even measure the performance of your site’s individual assets.
Here, we are summing up a few of the hundreds of best tips and tricks for Chrome DevTools that will enhance your workflow even more. Let us check them out one-by-one.
Quick file switching
If you want to quickly search and open a file within a current project or web page, DevTools can prove helpful. When DevTools is open, just press Ctrl + P on Windows (Cmd + P on Mac) and easily access any file you want.
Go to line
Other handy tip of the Chrome DevTools is its Go to line feature that allows you to easily jump to any line in a file that you have opened in the Sources tab. To start with, simply press Ctrl+G (Cmd + L on Mac) and then type the number of the line you want to switch.
Search within source code
Chrome DevTools let you easily and quickly search anything within your source code simply by pressing Ctrl + Shift + F (Cmd + Opt + F). This searching method also supports regular expressions.
Pretty Print
Do you know that Chrome DevTools come with a pretty print feature on-board? It allows you to change the format of your minimised codes with ease. To start the process, click on {} which will later go back to the normal view thus you can easily go through it. You can find the Pretty Print button in the bottom left of the file which is currently opened in the Sources tab.
Use multiple carets and selections
Switching to multiple carets and sections is among the best trick of the Chrome DevTools that helps you write in many places at once. To start with, just set multiple carets by holding Ctrl key (Cmd for Mac) and click where you wish them to be.
Preserve Log
Preserve Log offers you a handy tip that proves helpful especially when you need to investigate bugs that put in an appearance just before the page is unloaded. Using Preserve Log, you can make the Chrome DevTools Console stick with the log rather than clearing it on every page load simply by checking the Preserve log option in the Console tab.
Device mode
Another killer feature of DevTools is its Device mode that allows you to inspect your website as well as media queries to check if your responsive design is breaking anywhere or not. Using the feature, you can even check that at which resolution the page is breaking so that you can get to know that where to apply the media query. To start with the Device Mode feature, click on the small phone icon in the Chrome DevTools or head to Ctrl + Shift + M keys (Cmd + Shift + M for Mac). Once done, you can then select the device you wish to emulate, or want to check the orientation and resolution for. Besides, the feature lets you alter the network throttling to check how your website would actually render such as on a regular 2G connection.
Device emulation sensors
Device emulation is another must-know feature of DevTools that allows you to simulate touch screens and accelerators. To get started just click into Console, Emulation and then into Sensors. Besides, the trick even allows you to spoof your geographic location.
Color picker
To select a color in the Styles editor and to open the color picker pop up, just click on the color preview. When the picker is opened, and you are over you page, your mouse pointer will then turn into a magnifying glass allowing you to select any color with pixel accuracy.
Change color format
Make use of Shift + click keys on the color preview block to make alterations between rgba, hsl and hexadecimal formatting.
Force element state
Chrome Devtools also comes packed in a feature that simulates CSS states like :focus and :hover on elements to make them easy to style. You can use the tip from the CSS editor.
Select next occurrence
While making editing in a file in the Sources tab if you hit Ctrl + D keys (Cmd + D for Mac), the next occurrence of the word you are currently at will also be get selected to help you edit it simultaneously.
Edit local files through Workspaces
This is another very powerful and must-have feature of DevTools. While changing things in the developer tools, they by default disappear once you refresh the page. Here Workspaces comes into view. It allows you to persist all such changes by saving them to your disk. To get started, just right-click on a folder and choose “Add folder to local workspace”. After that, to make things persistent, right-click on a file and then select the “Map to file system resource” option.
Security Panel
Security Panel is a remarkable feature added by the Chrome team to the DevTools. It can prove really useful to debug HTTPS migrations and to quickly fix mixed content warnings. To make use of this, click into the Security panel and give a hit on Ctrl + R keys (Cmd + R for Mac) and your page will be refreshed. Once done, it will then show secure scripts in green and the non-secure one in red.
Monitor network performance
In the latest developer tools update, you can find the addition of an aggregated details panel in the waterfall timeline which lets you check what is costing you the most time. You can then easily break it down by domains and sub-domains.
To start with, navigate to the Timeline panel and press Ctrl + R (Cmd +R for Mac) to refresh the page. After that, you can click on the Summary panel and the Aggregated details panel.
We have summed up a list of some Chrome DevTools features that can help you develop better and debug faster in this post. With the help of these DevTools, you can more efficiently measure the performance of your website or app.
If we have missed any feature that you feel is really important to be mentioned in the post then shoot your view in the comments section. Till then, go happily with our list of Chrome DevTools!
