如何将JS源映射添加到Chrome开发工具中?

21

我的JavaScript应用程序出现了异常,但代码被混淆了。我想知道原始源代码中哪一行引发了异常。源映射未部署,因此Chrome Devtools无法连接它们。我可能在本地主机上有源映射。

基本上,我想将我的计算机上的源映射添加到浏览器中,以便知道异常发生的行号。

我尝试了添加文件夹到工作区映射到文件系统资源,但没有帮助。在浏览器控制台中可以看到异常,但仍然指向混淆的JavaScript源代码,并且所需的行号无法检测到。

我可能做错了什么。任何帮助都将不胜感激(包括使用其他扩展或浏览器)。


3
我认为这个应该可行:https://dev59.com/E1oV5IYBdhLWcg3weevH#36210861。否则,你可以使用StackTrace.js处理调用堆栈字符串:http://www.mattzeunert.com/2016/07/07/resolving-minified-production-stacktrace.html - Matt Zeunert
1个回答

3
尽管Workspaces功能强大,但是它也存在一些限制需要注意。
限制如下:
- 在元素面板中仅对样式更改进行持久化;对DOM的更改不会被保存。 - 只有在外部CSS文件中定义的样式才能够被保存。对element.style或内联样式的更改不会被保存(如果您有内联样式,则可以在“Sources”面板上进行更改)。 - 如果您将CSS资源映射到本地文件,则元素面板中的样式更改会立即持久化,无需显式保存——使用Ctrl + S或Cmd + S(Mac)。 - 如果您是从远程服务器而不是本地服务器映射文件,则在刷新页面时,Chrome会从远程服务器重新加载页面。您对样式所做的更改仍然会持久化并在继续使用Workspaces编辑时重新应用。 - 您必须在浏览器中使用映射文件的完整路径。即使是索引文件,在URL中也必须包含“.html”,以便查看暂存版本。
参考链接:https://developers.google.com/web/tools/setup/setup-workflow

1
我有同样的问题,但似乎这个被接受的答案并没有帮助。 - RyanShao

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接