DevTools Keyboard Shortcuts
| Ctrl+Option+I | Open whatever panel you used last |
| Ctrl+[(or ]) | Focus the previous(next) panel |
| Ctrl+Shift+P | Run command |
Ctrl+Shift+P to Run command
- Capture screenshot, Capture area screenshot: useful when your company blocks Chrome screenshot extension.
Inject CSS
- At console:
document.head.insertAdjacentHTML('beforeend','<style></style>');
Network Tab
- Search all response bodies in network tab
- “Preserve log” on navigation
- Copy image as data URI
Sources Tab
- Ctrl+Shift+F to search source code
- Pretty print {}
- Find loaded content scripts at source tab
- Set XHR/fetch breakpoints to check who sends the request
- Add breakpoints at source code
- Trigger a breakpoint when an exception occurs
- Add Conditional breakpoints
- Add Event breakpoints
- Add
debugger;in the code to trigger programmatic breakpoints - Add an expression to the watch list
- Add debug snippets
Shortcuts in the Sources panel:
| ctrl+o | show all the files loaded by the page. |
| ctrl+shift+o | show the symbols(properties,functions,classes) in the current file. |
| ctrl+g | go to a specific line |
Elements tab
- Break on -> subtree modifications
- Edit as HTML
- Drag and Drop any HTML element
- Scroll into view
- Force state
- ctrl-click a CSS property to find where it’s defined.
- Copy XPath or selector from Elements panel
- Alt+Click the arrow to expand all child nodes.
Console tab
- Preserve log on navigation
- At the console tab, click the settings icon on the top right:
- At the console tab, click the settings icon on the top right:
document.designMode = 'on'to change anything in the page- $0 in console refers to the currently selected node
- $(css_selector): document.querySelector()
- $$(css_selector): document.querySelectorAll()
- $_ to reference the return value of the previous operation executed
- shift+enter to span command in multiple lines
- ctrl+l(cmd+k on Mac) to clear console
Other Chrome DevTools Tips
- Check
Enable Ctrl + 1-9 shortcut to switch panelsat DevTools Settings -> Appearance - Change DevTools position
