Chrome DevTools Common Use


View Event Listeners of HTML Elements

Element -> Event Listeners

  • Ancestors: unchecked
  • All/Passive/Blocking: Blocking
  • Framework listeners: checked

Edit HTML element

You can edit HTML on the fly and preview the changes by selecting any element, choosing a DOM element within the panel, and double clicking on the opening tag to edit it.

Edit CSS property

you can also change CSS in Chrome DevTools and preview what the result will look like. This is probably one of the most common uses for this tool. Simply select the element you want to edit and under the styles panel you can add/change any CSS property you want.

Change color format

You can toggle between RGBA, HSL, and hexadecimal formatting by pressing Shift + Click on the color block.


Design Mode

you can freely make edits to the page as if it were a document.

Open design mode: document.designMode = “on”

Monitoring events on-page elements

monitorEvents($0, ‘mouse’)


Pretty print

You can easily change the formatting of your minimized code by clicking on {}.

Multiple cursors

You can easily add multiple cursors by pressing Cmd + Click (Ctrl + Click) and entering information on multiple lines at the same time.

Search source code

You can quickly search all of your source code by pressing Cmd + Opt + F (Ctrl + Shift + F).


Without Cache When Access Web Page

Checked “Disable cache”


Dock Position

You can also change the Chrome DevTools dock position. You can either undock into a separate window, or dock it on the left, bottom, or right side of the browser. The dock position can be changed by pressing Cmd + Shift + D (Ctrl + Shift + D) or through the menu.


[1] Chrome DevTools

[2] Chrome DevTools - 20+ Tips and Tricks

[3] 8 Lesser Known but KILLER Features of Chrome DevTools