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

Question

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

所以基本上我想从我的机器添加源映射到浏览器,以便知道出现异常的行号.

我试着Add Folder to Workspace和Map to File System Resource.它没有帮助.在浏览器的控制台中可以看到异常,但它仍然指向混淆的javascript源,并且无法检测到所需的行号.

我可能做错了什么.任何帮助表示赞赏(包括额外的扩展或其他浏览器使用).

Answer 1

尽管工作区功能强大，但您应该注意一些限制。

局限性

仅保留“元素”面板中的样式更改；对 DOM 的更改不会持久。
只能保存外部 CSS 文件中定义的样式。对 element.style 或内联样式的更改不会保留。（如果您有内联样式，则可以在“源”面板上更改它们。）
如果您将 CSS 资源映射到本地文件，则“元素”面板中的样式更改将立即保留，无需显式保存 - Ctrl + S 或 Cmd + S (Mac)。
如果您从远程服务器而不是本地服务器映射文件，则刷新页面时，Chrome 会从远程服务器重新加载页面。您的更改仍会保留到磁盘，并且如果您继续在工作区中进行编辑，则会重新应用。
您必须在浏览器中使用映射文件的完整路径。即使您的索引文件也必须在 URL 中包含 .html，才能查看暂存版本。