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

google-chrome-devtools

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?

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.

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

JDB

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]

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. =)

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 :/

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?

Aleksei Mialkin

CTRL + P brings up the search input in Windows.

https://i.stack.imgur.com/8NICn.png

⌘ + P — in Mac.

https://i.stack.imgur.com/73FA2.png

O and P seem to have the same behavior. I wonder if one is deprecated.

live-love

In Windows:

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

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

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

Jackie

Mac: Command + O Windows: Ctrl + O

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

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Links

Contact US