Chrome DevTools Common Use
- 1. Elements
- 2. Console
- 3. Sources
- 4. Network
- 5. Others
- 6. References
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.
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
You can easily change the formatting of your minimized code by clicking on
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”
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.
 Chrome DevTools
 Chrome DevTools - 20+ Tips and Tricks