Any way to pin or bookmark a Javascript source file for easy access from the Chrome debugger?

Question

I am debugging a Javascript file that is deeply nested in the source tree. The URLs I have to drill down through are extremely hard to memorize since the JS source I want is loaded inside an iFrame that has been loaded by an Add-In API.

Is there a way to "pin" or "bookmark" a reference to the Javascript source from within the Chrome debugger, so I don't have to drill down the sources tree every time I reload the web page just to get back to that source file again?

Synchronize

If you can modify the source you could use debugger;? – Fructiferous

Answer 1

There's a few different options, but there's no specific "pinning" feature in DevTools.

1. The files opened in the Source tab persist between browser sessions, so you could just keep it there and not close it. That's the first obvious thing I noticed.

2. If you know the file name, use Cmd+O (Mac) / Ctrl+O (Windows/Linux) to open the 'Search by filename' box, and then you can open the file directly instead of via the tree.

3. If you want to actually debug the file, do what Christiaan suggested, and add a debugger; statement to your source code. This will automatically open the file in the Sources panel, and break on whatever line you put it on. You can also just use Chrome's built-in breakpoints. These will persist until you disable or remove them, and it doesn't involve modifying any code.

4. Use Workspaces to map the network path (e.g. a server running locally or externally) to a folder on the file system. Instead of adding the whole app folder, you could select a particular nested folder. This will then appear in the Filesystem section within the Sources tab. You can easily jump to the file at this point. This is one I came up with just now so not fully tested.

   I don't have a great example of this, but below I have mapped the css folder.

In the Filesystem section, I see all the files in use from within that folder, not the whole source tree.

Confide

Answer 2

If you add the below special comment to line 1 of your JavaScript file, then press Ctrl + P to search for it and open it up, it will effectively be pinned in the sources tab until you close it. Even if you close DevTools, or restart your computer, or update the javascript file, it will persist.

//@ sourceURL=myJavaScriptFile.js

Note: If you add a space after the slashes like this '// @ sourceURL=myJavaScriptFile.js' it will not work. - I fell into that trap before.

Redbreast

Seems like this doesn't work with webpack which I assume is adding its own source mapping, shame! – Referent