Chrome DevTools Common Use
Elements
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.
Console
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’)
Sources
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).
Network
Without Cache When Access Web Page
Checked “Disable cache”
Others
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.
References
[1] Chrome DevTools