Most Useful Shortcuts
Ctrl Shift I – Open developer tools.
Ctrl Shift P – Search within file. Displays all functions within a file.
Ctrl P – show js files. Type to search.
Ctrl Shift C – inspect element
Esc – toggle console
Ctrl F – find inside a file
Ctrl Shift F – find across all sources
To enable text editing directly in a browser:
document.body.contentEditable = true;
To time something: console.time(“my action”); … console.timeEnd(“my action”)
Snippets – run custom JavaScript code and run it anwhere you want. https://bgrins.github.io/devtools-snippets/
To disable cache – Network tab – disable cache (while DevTools is open).
Add timestamp to events displayed in console – Settings – General – Console – Show timestamps.
Enabling awesome dark theme:
Go to chrome://flags – Enable Developer Tools Experiments.
Open Chrome Dev Tools. – Settings – Experiments – allow custom UIthemes
Install a DevTools Theme. Here’s one.
A cool video about the above and much more – Chrome Developer Tools Deep Dive by Shay Friedman