Chrome Developer Tools Productivity Tips

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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.