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

Question

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

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

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

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

Answer 1

与Workspaces一样强大，您应该注意一些限制。

限制

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

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