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

javascript debugging google-chrome google-chrome-devtools frontend

65,451

Solution 1

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

CTRL + P brings up the search input in Windows.

⌘ + P — in Mac.

Solution 3

In Windows:

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

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

Solution 4

Mac: Command + O Windows: Ctrl + O

View more solutions

65,451

Author by

Alpha

var me = { from: "Argentina", passions: { music: "Electronic", job: "Software Architect" }, terribleSecret: function() { //TODO fix: they found me $(HiggsBoson).hide(); } };

Updated on October 28, 2020

Comments

Alpha over 3 years

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?
rakslice almost 10 years

This is good to know! You used to (before Chrome 35?) be able to start a filename search by just typing with the file navigator in the Sources tab focused; it's good to know that they've hidden this feature behind a shortcut rather than removing it completely. =)
worc over 7 years

the caveat to the filter/search is that you can't seem to do exact searches or wildcards. searching for .js returns any file with a j or an s or a . in the filename :/
isherwood about 6 years

O and P seem to have the same behavior. I wonder if one is deprecated.
Mote Zart over 3 years

If using a build process, and the files are no longer recognizable in chrome, searching by content is a great solution.
Santosh Kumar over 2 years

When I go to open a file, I see multiple version of same files. I have to go through each file to find the appropriate file. What do you recommend?