javascript - How to add JS source map into Chrome devtools? - Stack Overflow

admin管理员组

文章数量:1289911

My deployed JavaScript application raises an exception. The Javascript code is obfuscated. I would like to know, which line in original source code raises an exception. Source maps are not deployed, so Chrome Devtools can't connect them. I may have source maps on my localhost.

So basically I would like to add source maps from my machine to the browser in order to know the line number, where exceptions occurs.

I tried Add Folder to Workspace and Map to File System Resource. It does not help. An exception is visible in browser's console, but it still points into obfuscated javascript source and desired line number is not detectable.

I may do something wrong. Any help is appreciated (including additional extension or other browser usage).

My deployed JavaScript application raises an exception. The Javascript code is obfuscated. I would like to know, which line in original source code raises an exception. Source maps are not deployed, so Chrome Devtools can't connect them. I may have source maps on my localhost.

So basically I would like to add source maps from my machine to the browser in order to know the line number, where exceptions occurs.

I tried Add Folder to Workspace and Map to File System Resource. It does not help. An exception is visible in browser's console, but it still points into obfuscated javascript source and desired line number is not detectable.

I may do something wrong. Any help is appreciated (including additional extension or other browser usage).

• javascript
• google-chrome-devtools
• remote-debugging
• source-maps

Share Improve this question Follow asked Sep 29, 2016 at 21:06 Andrii SkaliukAndrii Skaliuk 43811 gold badge66 silver badges1515 bronze badges 1

• 3 I think this should work: stackoverflow./a/36210861/1290545 Otherwise, you could take the call stack string and process it using StackTrace.js mattzeunert./2016/07/07/… – Matt Zeunert Commented Oct 3, 2016 at 10:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

As powerful as Workspaces are, there are some limitations you should be aware of.

Limitations

• Only style changes in the Elements panel are persisted; changes to the DOM are not persisted.
• Only styles defined in an external CSS file can be saved. Changes to element.style or to inline styles are not persisted. (If you have inline styles, they can be changed on the Sources panel.)
• Style changes in the Elements panel are persisted immediately without an explicit save -- Ctrl + S or Cmd + S (Mac) -- if you have the CSS resource mapped to a local file.
• If you are mapping files from a remote server instead of a local server, when you refresh the page, Chrome reloads the page from the remote server. Your changes still persist to disk and are reapplied if you continue editing in Workspaces.
• You must use the full path to a mapped file in the browser. Even your index files must include .html in the URL, in order to see the staged version.

https://developers.google./web/tools/setup/setup-workflow

本文标签： javascriptHow to add JS source map into Chrome devtoolsStack Overflow