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

Published: · Reading time: 6 min

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.

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
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
Dev Tools panel layout

3. Switch between Dev Tools panels

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

  • cmd + 1-9 for MAC;
  • ctrl + 1-9 for Windows and Linux.
Dev Tools panel switch
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
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
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
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
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
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
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
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
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
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
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
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
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
Expand all sub-properties
Like this article? Share it on: