如何将 JS 源映射添加到 Chrome devtools?
How to add JS source map into Chrome devtools?
我部署的 JavaScript 应用程序引发异常。 Javascript 代码被混淆了。我想知道,原始源代码中的哪一行引发了异常。未部署源映射,因此 Chrome Devtools 无法连接它们。我的本地主机上可能有源映射。
所以基本上我想将源映射从我的机器添加到浏览器,以便知道发生异常的行号。
我尝试了 Add Folder to Workspace
和 Map to File System Resource
。它没有帮助。在浏览器的控制台中可以看到异常,但它仍然指向混淆的 javascript 源并且无法检测到所需的行号。
我可能做错了什么。感谢任何帮助(包括额外的扩展或其他浏览器的使用)。
尽管工作区功能强大,但您应该了解一些限制。
限制
- 仅保留元素面板中的样式更改; DOM 的更改不会保留。
- 只能保存在外部 CSS 文件中定义的样式。对 element.style 或内联样式的更改不会保留。 (如果您有内联样式,可以在“源”面板上更改它们。)
- 元素面板中的样式更改会立即保留而无需显式保存 -- Ctrl + S 或 Cmd + S (Mac) -- 如果您将 CSS 资源映射到本地文件。
- 如果您从远程服务器而不是本地服务器映射文件,当您刷新页面时,Chrome 会从远程服务器重新加载页面。如果您继续在 Workspaces 中编辑,您的更改仍会保存到磁盘并重新应用。
- 您必须在浏览器中使用映射文件的完整路径。甚至您的索引文件也必须在 URL 中包含 .html 才能看到暂存版本。
https://developers.google.com/web/tools/setup/setup-workflow
我部署的 JavaScript 应用程序引发异常。 Javascript 代码被混淆了。我想知道,原始源代码中的哪一行引发了异常。未部署源映射,因此 Chrome Devtools 无法连接它们。我的本地主机上可能有源映射。
所以基本上我想将源映射从我的机器添加到浏览器,以便知道发生异常的行号。
我尝试了 Add Folder to Workspace
和 Map to File System Resource
。它没有帮助。在浏览器的控制台中可以看到异常,但它仍然指向混淆的 javascript 源并且无法检测到所需的行号。
我可能做错了什么。感谢任何帮助(包括额外的扩展或其他浏览器的使用)。
尽管工作区功能强大,但您应该了解一些限制。
限制
- 仅保留元素面板中的样式更改; DOM 的更改不会保留。
- 只能保存在外部 CSS 文件中定义的样式。对 element.style 或内联样式的更改不会保留。 (如果您有内联样式,可以在“源”面板上更改它们。)
- 元素面板中的样式更改会立即保留而无需显式保存 -- Ctrl + S 或 Cmd + S (Mac) -- 如果您将 CSS 资源映射到本地文件。
- 如果您从远程服务器而不是本地服务器映射文件,当您刷新页面时,Chrome 会从远程服务器重新加载页面。如果您继续在 Workspaces 中编辑,您的更改仍会保存到磁盘并重新应用。
- 您必须在浏览器中使用映射文件的完整路径。甚至您的索引文件也必须在 URL 中包含 .html 才能看到暂存版本。
https://developers.google.com/web/tools/setup/setup-workflow