0

I am using the google chrome to debugging the javascript source file, now I could debbugging the output js file, but the output js file is not human friendly readable. It looks like this:

enter image description here

from the google chrome console, I can see the call stack, and the google chrome tips shows that the source map are avaliable. But how to navigate the the js source file with current debugging line? I already type command + P in macOS but just shows the source files, I did not know which line should to navigate. the call stack only show the output js file line number.

Improve this question
1
  • 1
    Did you try to reload the page after opening debugger tools? Try to execute the part of the app which triggers the code you have written. It should pause at the debug point 23487 line you have set. Commented Jan 22, 2022 at 16:25

2 Answers 2

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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

Improve this answer

3 Comments

I want to debbuging the original source code, the common.js is not human friendly, I did not know where is going wrong from the common.js file.@Aakriti Gupta
What is the name of file having original source code you want to debug? After loading the app you should be able to see that file in your sources tab. If it is not shown, that means your js file is not properly linked to your html. @Dolphin
Provide more screenshots of your directory structure where you are developing v/s what you see in sources tab. @Dolphin

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.