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

Posted 2023-02-25

【中文标题】如何将 JS 源映射添加到 Chrome 开发工具中？

【英文标题】：How to add JS source map into Chrome devtools?

【发布时间】：2017-02-08 08:28:40

【问题描述】：

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

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

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

我可能做错了什么。感谢您提供任何帮助（包括额外的扩展程序或其他浏览器使用）。

【问题讨论】：

我认为这应该可行：***.com/a/36210861/1290545 否则，您可以获取调用堆栈字符串并使用 StackTrace.js 处理它mattzeunert.com/2016/07/07/…

【参考方案1】：

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

限制

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

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