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

Google Chrome-Devtools

Google Chrome-Devtools Problem Overview


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?

Google Chrome-Devtools Solutions


Solution 1 - Google Chrome-Devtools

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]

Solution 2 - Google Chrome-Devtools

CTRL + P brings up the search input in Windows.

enter image description here

+ P — in Mac.

enter image description here

Solution 3 - Google Chrome-Devtools

In Windows:

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

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

Solution 4 - Google Chrome-Devtools

Mac: Command + O Windows: Ctrl + O

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAlphaView Question on Stackoverflow
Solution 1 - Google Chrome-DevtoolsCD..View Answer on Stackoverflow
Solution 2 - Google Chrome-DevtoolsAleksei MialkinView Answer on Stackoverflow
Solution 3 - Google Chrome-Devtoolslive-loveView Answer on Stackoverflow
Solution 4 - Google Chrome-DevtoolsJackieView Answer on Stackoverflow