10 Quick Google DevTools Tips

Google developer tools (DevTools) are a set of web authoring and debugging tools built within google chrome.

As a developer, using DevTools makes my life easier when creating A/B tests. DevTools allows me to manipulate a live site and change content instantly speeding up my efficiency when developing. As DevTools offers a lot of tools for developers to use, the main tools I use from day to day are the console, styling tab and the elements tab.

These are my 10 useful tips within DevTools, most suitable for developers and designers:

All shortcuts will be shown as (windows / Mac)

To open google DevTools

Within the google chrome browser right click on an element on a web page then select inspect element from the menu – this will open dev tools with your selected element focused in the DOM.

OR

Use this shortcut to instantly open dev tools.

(Ctrl + shift + I / Cmd + Opt + I)

1) Inspector Style Sheet

This lets you apply your own style sheet within dev tools, allowing you to write your own CSS giving you much more freedom than just using the element styling tab to style elements.

2) Search All Files

(Ctrl + Shift + F)/(Cmd + Opt+ F)

This feature lets you search through all the files on the website. This is very useful for finding Classes, ID’s and functions across mass files.

3) Pretty Print

Dev tools has ‘pretty print’ built in, making our lives easier as we can change the formatting of minimised files to make them easier to read for us humans.

4) Deleting Cookies

Cookies are easy to clear through chrome dev tools. Click on the application tab to open the menu, then click on the cookies tab. This will open a menu, from which you can remove selected cookies by ‘clicking’ and then ‘backspace’. This is extremely useful while A/B testing as, if you make changes to a test you will need to erase the old cookie for the new one to be downloaded.

5) Preserve Log

By enabling the preserve log option, the console will persist and won’t clear the log on refresh of the page. This is great to use while bug fixing and testing.

6) Traversing an Element Up And Down The DOM (Document Object Model)

(Ctrl + Alt + Up/Dwn Arrow Key)/(Opt + Cmd + Up/Dwn Arrow Key)

This shortcut allows you to quickly manipulate elements changing their position around the hierarchy.

7) Changing Docking Position

(Ctrl + Shift + D)/(Cmd + Shift + D)

Use this shortcut to toggle between different panel docking positions. It’s useful to change the docking position while testing cross device. For example, while using DevTools testing a desktop website I prefer to use ‘’undock into separate window” so I can see the full view of the website. While developing for mobile I prefer to use the dock on the left side as the mobile screen is smaller it can fit DevTools on without effective the mobile view.

8) Forcing Element States

This feature allows you to force an element into states making them easier to style. The states we can set are active, hover, focus and visited.

9) Changing Colour Format

(Shift + Click)/(Cmd + Click) on colour block

This shortcut lets you toggle between RGB, HEX and HSL colour formats.

10) Colour Picking

Clicking on the colour block within the styling editor will bring up the colour picking menu. This also features a magnifying glass for pixel perfect accuracy.