Chrome DevTool Features To Improve Your Front End Development, Part I


Google Chrome DevTools is a tool many front end developers use daily to make their development work flow much easier. Like so many of the tools we use, however, most of us probably learned just enough of the basics to get by. We all understand there are greater work flow improvements to be gained if we invested the time and effort in learning more features tools like these can do for us. But that’s the thing, more time and effort… ugh. Well, here’s an article that attempts to minimize that effort and shares a few of the more useful features in Chrome DevTools that I've found.


In this first part, I'll share some features around viewing and editing in DevTools.

Color Palettes

Click any color swatch in the styles tab to reveal the color picker. Then click the up and down arrows next to the color swatches to reveal a collection of color palettes, the first group is DevTools' built in Material Theme color palette. The last group are colors found on the page you are viewing.

Opening color palettes in Chrome DevTools animation. 

Color Formats

Hold down the shift key and click any color swatch in the styles tab to cycle between color formats. Opening the color picker and clicking the up and down arrows next to the color value will also cycle through color formats. There’s no longer a need to visit any of those color format conversion sites.

Changing color formats in Chrome DevTools animation.

Select Elements

Press ctrl (cmd for MacOS) + shift + C when viewing a page to highlight and select DOM elments. Before selecting an element, notice how a tooltip box will pop up with useful information about the currently hovered element. When applicable, the tooltip will show the accessibility contrast value for the color of text against its background. This is something I've found very handy recently.

Selecting DOM elements in Chrome DevTools animation.

Show/Hide Elements

Select a DOM element in the elements tab and press the H key to toggle the elements visibility on or off. This still preserves its space in the document flow it holds, only its visibility is toggled.

Show, Hide element shortcut in Chrome DevTools animation.

Expand Nested Elements

When viewing the markup in the Elements tab, hold down the alt key and click a DOM element to expand it along with all its child elements.

Expanding nested elements in Chrome DevTools animation.

Scroll Into View

Right click a DOM element within the Elements tab and select “Scroll into view to…” to scroll that element into view! Just an easy way to quickly see what you are working on if you've scrolled away from it.

Scroll element into view animation in Chrome DevTools.

All Event Listeners

In the Elements tab, activate the Events tab (to the right of the Styles and Computed tabs in the default layout) to see a list of all the JavaScript events on the current page.

Show all event listeners in Chrome DevTools animation.

DOM Breakpoints

You can add a DOM based breakpoint in the Elements tab by right clicking any DOM element, highlighting “Break on” and choosing “subtree modifications”, “attribute modifications”, or “node removal” depending on which type of DOM breakpoint you’d like to add to the element. This is a quick way to add breakpoints to your JavaScript when you know which element is being manipulated but are unclear where in your JavaScript the manipulation is occurring.

Adding DOM breakpoints in Chrome DevTools animation.

Save Changes In Work Spaces

The edits you make to the CSS and JavaScript in DevTools can be saved to disk by adding a folder to the DevTools Work Space. Under the Sources tab, activate the Filesystem tab. Then choose to add your project’s folder to the work space. DevTools will analyze the files in the folder you select, match the JavaScript and CSS changes you make to their appropriate files and save them. Changes to elements in the Elements tab will NOT be saved as this is not really HTML from a file but Chrome’s DOM representation of the HTML it parsed.

Adding a local development folder to Chrome DevTools animation.

Bring Up The Console Anywhere

You can bring up the JavaScript console in any DevTools panel you are in (except the Console tab itself) by pressing the esc key. Pretty handy for quickly accessing the console while viewing other areas.

Bringing up the JavaScript console shortcut in Chrome DevTools animation.

Recent Selection History

In the Console tab, $0 will represent the currently selected element in the Elements tab. DevTools will remember the history of the elements selected before the current element sequentially by increasing the integer. So $1 will represent the element selected before the currently selected element and so on. Combining this with bringing up the console via the esc key as mentioned previously allows you to highlight and access any element with the $0 syntax to quickly write JavaScript targeted to the precise elements you want to target.

Using recent selection history in Chrome DevTools animation.


This, of course, is not an exhaustive list of all the viewing/editing features that Chrome DevTools offers, but a collection of features that I've found to be quite useful in my day to day front end development workflow. In Part 2, I'll share some more slick features DevTools provides us on debugging JavaScript.