- 1. Elements
- 2. Console
- 3. Sources
- 4. Network
- 5. Others
- 6. References
Element -> Event Listeners
- Ancestors: unchecked
- All/Passive/Blocking: Blocking
- Framework listeners: checked
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.
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.
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”
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.
You can quickly search all of your source code by pressing
Cmd + Opt + F (
Ctrl + Shift + F).
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