how to navigate to the source file when debugging js in google chrome

Next to the "Page" tab (you can make the side bar bigger or click on those two arrows, there you will find the "Filesystem tab". If you add the corresponding folder to the workspace you will be able to edit and save those files.

Here's an article that explains it in details using a python server.

tabs menu

(note that you can use any local server you'd like)

filesystem menu

(note that it won't work with local files url like file:///)


If you are trying to debug your current JS file at line 23487, steps would be to-

  1. Load URL.
  2. Open chrome debugger tools.
  3. Put debug point on desired line.
  4. Reload the URL, the debugger will pause at debug point.

You can watch below video for this, specifically @10:40 timestamp.

https://www.youtube.com/watch?v=WmVEddplwbo