reactjs - 让源映射适用于使用 Create React App 构建的 Chrome 扩展

Question

我正在使用 React 编写 Chrome 扩展，更具体地说，使用 Create React App。如果我检查扩展生成的弹出窗口，查看源，然后单击任何 js 文件，Chrome 会显示“检测到源映射”。如果我点击“更多”，它会说“关联的文件应该添加到文件树中。您可以将这些已解析的源文件作为常规 JavaScript 文件进行调试。”。但我在源树中的任何位置都看不到源文件。我需要做什么才能查看它们？

我尝试将源映射添加到 manifest.json 的 web_accessible_resources 属性中(按照 Do source maps work for Chrome extensions? )，但这不起作用。还尝试了 chrome 72 changes sourcemap behaviour 的最佳答案中建议的更改- 对 webpack.config.js 和 manifest.json 进行一些更改 - 但这也不起作用。

Answer 1

您正在使用工作区吗？

https://developers.google.com/web/tools/chrome-devtools/workspaces/

顺便说一句，创建React应用程序默认情况下不会生成所有的sourceMap。

你能检查一下文件吗

node_modules/react-scripts/config/webpack.config.js

在那里搜索 sourceMap 和 sourceMaps，看看这是否适合您。您可以像“_original”一样复制该文件，然后设置源映射:true，

在所有情况下。之后，完全停止该应用，然后再次启动。

现在可以用了吗？

要验证哪个 sourceMap 正在工作，请将源添加到工作区并检查绿点: https://developers.google.com/web/tools/chrome-devtools/workspaces/