Category Archives: Developer Tools

Shortcuts for Chrome Dev Tools

Chrome Developer Tools: Search or navigate to files, methods or line numbers. Shortcuts for text search and beyond.

To search scripts, stylesheets and snippets by filename you can use:
Ctrl + O (Windows)
Cmd + O (Mac OSX)

To perform a text search within the current file you can use:
Ctrl + F (Windows)
Cmd + F (Mac OSX)

To do a text search across all files you can use:
Ctrl + Shift + F (Windows)
Cmd + Opt + F (Max OSX)

If you need to dig down deeper, it’s possible to filter for or navigate to a particular JavaScript function/method or CSS rule when viewing a file using:
Ctrl + Shift + O (Windows)
Cmd + Shift + O (Mac OSX)

The tools also support going to a specific line-number within the Sources editor. To launch the line number dialog when viewing a file you can use:
Ctrl + L (Windows)
CMD + L (Mac OSX)

Cmd/Ctrl + F works across tabs other than Sources such as Resources or Network. If you check the ‘filter’ option when searching, this will filter down the list of results to only those containing the terms you were looking for.

You can also switch between tabs using Cmd + [ and Cmd + ]

If you are editing a script and select some code, you can evaluate it in the console right away using Ctrl + Shift + e

Thanks to @addyosmani