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.

20 Smart Google Chrome DevTools Tips for Web Developers

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.

Smart Google Chrome DevTools Tips

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.

Smart Google Chrome DevTools Tips

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.

Smart Google Chrome DevTools Tips

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.

Smart Google Chrome DevTools Tips

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.

Smart Google Chrome DevTools Tips

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.

Smart Google Chrome DevTools Tips

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.

Smart Google Chrome DevTools Tips

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.

Smart Google Chrome DevTools Tips

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.

Smart Google Chrome DevTools Tips

10. Shortcut to clear the console history

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

Smart Google Chrome DevTools Tips

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.

Smart Google Chrome DevTools Tips

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.

Smart Google Chrome DevTools Tips

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.

Smart Google Chrome DevTools Tips

14. Disable JavaScript

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

Smart Google Chrome DevTools Tips

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.

Smart Google Chrome DevTools Tips

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.

Change color format-min

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.

Smart Google Chrome DevTools Tips

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“.

Smart Google Chrome DevTools Tips

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.

Smart Google Chrome DevTools Tips

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.

Smart Google Chrome DevTools Tips

 

Related posts:


By admin

Robert is a web designer and online marketing expert with over 18 years of experience. Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

  • Much thanks! It is an amazing web site.

  • The overall look of your site is great, as well as the content!

  • Cpanel Cloud Hosting India

    Outstanding post. I recommend it to ALL my friends.

  • VPS Cloud Linux Web Hosting

    Yes, i am agree with you. Really knowledgeable Post.