How to add JS source map into Chrome devtools?
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).
Answer
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.com/web/tools/setup/setup-workflow