How to go to a specific file in Chrome Developer Tools?

117
votes

I am developing a web application with a heavy front-end approach. By using Dojo and the AMD-way, I currently have testing screens which may easily load over a hundred different javascript files.

When I want to debug for any specific problem, or verify if I am seeing an old version of a specific file, I find it really hard to find my files in the Sources tab in the Chrome Developer Tools.

Is there any shortcut or action I can make that will let me type the name of a file and will take me to the source of that file?

4
javascriptdebugginggoogle-chromegoogle-chrome-devtoolsfrontend
On the bottom right of the console, there is a gear icon. Click it. On the last tab in the settings window there is a shortcuts tab. You can see the key combos like the answer. – epascarello
Use 'Go to file' in Google Dev Tools (a flexible and useful tool with ability search on your function name, class name in CSS, ...)'Go to file' in Google Dev Tools – Iman Bahrampour

4 Answers

164
votes

While in the sources tab use CTRL+O (⌘+O for Mac) to search scripts, stylesheets and snippets by filename.

(use CTRL+SHIFT+O to filter/navigate to a JavaScript function/CSS rule when viewing a file)

[Chrome Devtools Cheatsheet]

20
votes

CTRL + P brings up the search input in Windows.

enter image description here

⌘ + P — in Mac.

enter image description here

4
votes

In Windows:

Use CTRL+SHIFT+F to search for content in files.

Use CTRL+SHIFT+O to search for file names.

0
votes

Mac: Command + O Windows: Ctrl + O