简体繁体 English

如何将JS源代码映射添加到Chrome devtools？

[英]How to add JS source map into Chrome devtools?

原文 2016-09-29 21:06:06 6 1 javascript/ google-chrome-devtools/ remote-debugging/ source-maps

My deployed JavaScript application raises an exception. 我部署的JavaScript应用程序引发了异常。 The Javascript code is obfuscated. Javascript代码被混淆了。 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. 未部署源地图，因此Chrome Devtools无法连接它们。 I may have source maps on my localhost. 我可能在我的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 . 我尝试Add Folder to Workspace并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. 在浏览器的控制台中可以看到异常，但它仍然指向混淆的javascript源，并且无法检测到所需的行号。

I may do something wrong. 我可能做错了什么。 Any help is appreciated (including additional extension or other browser usage). 任何帮助表示赞赏（包括额外的扩展或其他浏览器使用）。

1 个解决方案

As powerful as Workspaces are, there are some limitations you should be aware of. 与Workspaces一样强大，您应该注意一些限制。

Limitations 限制

Only style changes in the Elements panel are persisted; 仅保留“元素”面板中的样式更改; changes to the DOM are not persisted. 对DOM的更改不会保留。
Only styles defined in an external CSS file can be saved. 只能保存外部CSS文件中定义的样式。 Changes to element.style or to inline styles are not persisted. 对element.style或内联样式的更改不会保留。 (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. 如果您将CSS资源映射到本地文件，则“元素”面板中的样式更改会立即保留，而不会显式保存 - Ctrl + S或Cmd + S（Mac）。
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. 如果要从远程服务器而不是本地服务器映射文件，则在刷新页面时，Chrome会从远程服务器重新加载页面。 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. 即使您的索引文件必须在URL中包含.html，以便查看暂存版本。