DEV Community

Nikita Hlopov
Nikita Hlopov

Posted on

Cool Chrome Dev Tools tricks and tips you might not know about

Google Chrome browser has been my favorite browser for development for quite some time. And the Dev Tools capabilities is one of the reasons for that.

This article is a repost of the one I've made a year ago on my own blog - Cool Chrome Dev Tools tricks and tips you might not know about.

Below you will find a list of cool tricks and tips I've found in Chrome Dev Tools over the years.

  1. Dev Tools theme
  2. Dev Tools panel layout
  3. Switch between Dev Tools panels
  4. Switch between CSS properties
  5. Toggle element visibility
  6. Edit element attributes
  7. Search DOM tree
  8. Add devices
  9. Add new styles shortcut
  10. Edit any text content on the page
  11. Store value as a global variable in console
  12. Increment CSS values
  13. DOM elements as global variables
  14. Switch between color formats
  15. Return the value of the last expression evaluated in the console
  16. Bonus: Expand all sub-properties of an object that's been logged to the console

1. Dev Tools theme

There's a way to toggle between Light and Dark theme for Dev Tools. Inside Settings under Appearance choose between Light and Dark themes.

Dev Tools theme

2. Dev Tools panel layout

In some cases, it is more comfortable to work with a certain type of panel layout.
You can select between three possible layouts:

  • horizontal;
  • vertical;
  • auto.

It can be set inside Settings under Appearance.

Dev Tools panel layout

3. Switch between Dev Tools panels

There's an easy way to switch between Dev Tools panels via keyboard.

  • cmd + ]/[ for MAC;
  • ctrl + ]/[ for Windows and Linux.

Dev Tools panel switch

4. Switching between CSS properties

While in the Styles panel click on the CSS property and press:

  • tab to jump to the next property;
  • tab + shift to jump to the previous property.

Switching between CSS properties

5. Toggle element visibility

You can easily toggle element visibility inside element DOM tree by pressing h key on selected element.

Toggle element visibility

6. Edit element attributes

Inside element DOM tree press enter key on the selected element to edit attribute. Press tab to edit next attribute, press tab + shift edit previous attribute.

Edit element attributes

7. Search DOM tree

To find any attribute, element, content or any other string inside DOM tree just press:

  • cmd + f for MAC;
  • ctrl + f for Windows and Linux.

Search DOM tree

8. Add devices

You can enable/disable existing devices or add a custom device inside Device toolbar.
Inside Settings click on the Devices tab. You will see a list of existing devices where you can enable/disable devices. Or you can add a new one by clicking on the Add custom device... button.

Add devices

9. Add new styles shortcut

To quickly add a new style like:

  • Color;
  • Background color;
  • Text-shadow;
  • Box-shadow.

Hover over a small icon ( ) in the bottom left corner and the above options will appear.
To insert a new style rule below click on the + icon.

Add new styles shortcut

10. Edit any text content on the page

In the console write document.designMode = "on" and you will be able to edit any text content on the page instantly.

Document Design Mode

11. Store value as a global variable in console

Any returned data of object or function type can be stored as a global variable in the console. E.g. console.log(['a', 'b']) will return an array. Right click on it and select Store as a global variable which will be accessible via temp1 keyword in the console.

Note: These variables are temporary and are only available during the current session, meaning after page refresh they will be gone.

Store value as a global variable

12. Increment CSS values

Numeric CSS values can easily be incremented and decremented by using certain key combinations:

  • Increment value by 1 ;
  • Dcrement value by 1 ;
  • Increment value by 0.1 alt + ;
  • Dcrement value by 0.1 alt + ;
  • Increment value by 10 shift + ;
  • Dcrement value by 10 shift + ;
  • Increment value by 100 cmd + (MAC), ctrl + (Windows and Linux);
  • Dcrement value by 100 cmd + (MAC), ctrl + (Windows and Linux).

Increment CSS values

13. DOM elements as global variables

A DOM element can be stored and accessed as a global variable in the console. In the DOM tree right click on the element tag and click Store as a global variable.

Note: These variables are temporary and are only available during the current session, meaning after page refresh they will be gone.

DOM elements as global variables

14. Switch between color formats

You can easily change the color format by holding shift key and click on the Color Preview box next to the value.

Switch between color formats

15. Return the value of the last expression evaluated in the console

$_ in the Console returns the value of the last expression evaluated.

Return last evaluated expression

Bonus: Expand all sub-properties of an object that's been logged to the console

Once the object is logged, hold alt key and click expand icon.

Expand all sub-properties

Top comments (9)

Collapse
 
suckup_de profile image
Lars Moelleken

The "Search DOM tree" thingy also accepts CSS selectors.

Collapse
 
nikitahl profile image
Nikita Hlopov

Oh, thats cool, thanks!

Collapse
 
lazarohcm profile image
Lázaro Henrique

Nice one!

Another one that I've just found out is the box-shadow editor, really handy.

Image

Collapse
 
nikitahl profile image
Nikita Hlopov

Yes, that's cool! 👍

Collapse
 
pp profile image
Paweł Ludwiczak

Oh wow, that's a really useful list! Didn't know about many of them. I love #5 & #10, gonna make my life so much easier!

Collapse
 
aladin002dz profile image
Mahfoudh Arous • Edited

great article! but I think you can also add some "audits" tab features 🤔

Collapse
 
nikitahl profile image
Nikita Hlopov

Hey, thanks, maybe that's for a second part. ;)

Collapse
 
avxkim profile image
Alexander Kim • Edited

Number 3. Switching panels using ⌘-1/9 actually doesn't work.

Instead ⌘+[ or ⌘+] works.

Collapse
 
nikitahl profile image
Nikita Hlopov

Thanks, I'll correct that.