20 Smart Google Chrome DevTools Tips for Web Developers

Currently Google chrome is the most popular web browser among web developers due to its smart debugging tools. The browser has built-in developer tools (DevTools) that provides deep access into the browser and their applications. It helps you to track down layout issues, live CSS editing, JavaScript debugging, code optimization and more. In this article, we have 20 smart tips to use chrome web developer tools (DevTools) efficiently to increase your productivity.

How to access the Chrome DevTools?

The Chrome DevTools can be used easily by opening a page in Google Chrome and then take one of the following actions:

• Select the Hotdog menu  at the top-right of your browser window, then select
  Tools -> Developer tools.
• Right-click on any page element and select Inspect element.
• A number of useful shortcuts are also available for opening the DevTools:
  • Ctrl + Shift + I keys to open Developer Tools
  • Ctrl + Shift + J to open Developer Tools and bring
    focus to the Console.
  • Ctrl + Shift + C to toggle Inspect Element mode.

Google Chrome DevTools Tips:

1. Search within source code

If you want to search in all files loaded on the page for a specific string, just press Ctrl+Shift+F (Cmd+Option+F on mac) when DevTools is opened. This helps you to search across all your scripts with support for regular expressions and case sensitive search. But make sure ‘search in content scripts’ is checked in the inspector settings. This will return results from within iframes and HTML.

2. Preserve Log

If you want to see log on each page reload instead clearing it on every page load. You can just check the Preserve Log option in the Console Tab for that. This is useful to know the bugs before the page is unloaded.

3. Pretty Print {}

Mostly we’ve minimized JavaScript code in our project. But if want it to view in human readable format, there is a built-in code beautifier in DevTools, located in the bottom left of your opened file.

4. Color Picker

You can select colors with pixel accuracy by hovering on your page when the color picker is opened. The mouse pointer will transform into a magnifying glass when you it over page and give accurate colors with pixel.

5. Quick access panel

Your project has many CSS and JavaScript files. If you want to access these files, just press Ctrl + P (Cmd + P on Mac) when DevTools is opened. It will provide you quick access to all files with filter field on the top to search a particular file from your project and open it.

6. Go to line

If you want to go directly to the line in opened source, just press Ctrl + G for Windows and Linux, (or Cmd + L for Mac), and type in your line number to jump to the desired line number.

7. Select next occurrence

The DevTools help can help in editing files in the source tab. You just need to press Ctrl + D (Cmd + D) to select all occurrence of the current word in opened file source.

8. Device emulation sensors

This is fantastic feature from tools to simulate mobile devices’ sensors like touch screens and accelerometers. It also enables to emulate geo location coordinates. The feature is located at the Elements tab under Emulation -> Sensors.

9. Write multi-line commands

The tool allows multi-line editing mode in console’s multi-line editing mode. You just need to press Shift + Enter to enter in multi-line mode in the console.

10. Shortcut to clear the console history

You can easily clear console history using the Ctrl + L or Cmd + L shortcut.

11. Favorite an expression or variable value

If you’re using a variable name or expression again and again during a debug session, just add it to the “Watch Expression” list and see the change when your code runs.

12. Autocompletion of CSS properties

The DevTools also allows auto completion of known CSS properties and values, which are a useful way to determine which properties, can be set for the current element. You can use Ctrl + space to display a complete list of suggestions.

13. Drag and drop in the Elements panel

You can easily change position of an element within its parent or move it to a completely different part of the document by its drag-and-drop feature.

14. Disable JavaScript

We often need to disable JavaScript for the current page during development. Just go to Settings -> General and check “Disable JavaScript“.

15. Select multiple filters in the Network/Console panels

The tool allows you to filters in the Network and Console panels to narrow down the data displays based on different criteria. If you want to apply multiple filters then use shortcut (Cmd / Ctrl + click) to select more than one filter to be applied to view.

16. Change color format

The DevTools provide an easy way to know color details like rgba, hsl and hexadecimal by using Shift + Click on the color preview.

17. Visualize the shadow DOM

Using DevTools, you can view hidden elements like textboxes, buttons and input that normally hidden By Browsers. You just need to go Settings -> General and check “Show user agent shadow DOM“, that will show them in the element tab.

18. Force element state

If you want to force an element to choose one of :active, :hover, :focus or :visited state. DevTools support feature to simulate CSS states. You just need to right click on a child element and select ‘Inspect Element‘. In the element panel right-click the parent element and choose “Force Element State“.

19. Multiple cursors & selections

Chrome DevTools supports multiple cursors & selections in the Sources panel. You just need hold Ctrl (Cmd for Mac) and click where you want them to be, thus allow you to write in many places at a time.

20. Select elements in console

You can select DOM elements easily by using handy magic variables and functions supported by DevTools. You can try magic variables $(),$('div') and $$() to select DOM elements through tools.