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

javascript debugging google-chrome google-chrome-devtools frontend
Alpha picture Alpha · Jan 30, 2013 · Viewed 50.9k times · Source

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?

Answer

CD.. picture CD.. · Jan 30, 2013

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]

Related questions

How do you launch the JavaScript debugger in Google Chrome?

When using Google Chrome, I want to debug some JavaScript code. How can I do that?

Read More
Chrome developer tools do not show all JavaScript files any more

Not all JavaScript files are visible in Chorme Developer tools any more. Google Chrome is up to date. Version 44.0.2403.130 m Debug version of the app. Scripts in the head. <script src="/Scripts/jquery-ui-1.8.24.js"></script> <…

Read More
Chrome debugging - break on next click event

We have a button. Click events are handled by a 3rd party framework, however, the framework is buggy somehow. We want to debug the framework, however, we don't know where the corresponding event handler code resides to set a breakpoint. …

Read More