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

【问题标题】：Getting source maps to work for Chrome extensions built using Create React App让源映射适用于使用 Create React App 构建的 Chrome 扩展
【发布时间】：2019-11-20 16:53:18
【问题描述】：

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

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

【问题讨论】：

标签： reactjs google-chrome-extension google-chrome-devtools create-react-app source-maps

【解决方案1】：

您在使用工作区吗？

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

顺便说一句，创建 react 应用程序默认不会生成所有 sourceMaps。

你能检查一下文件吗

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

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

在所有情况下。之后，完全停止应用，然后重新启动。

现在有效吗？

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

【讨论】：

不，我没有使用工作区。我首先构建应用程序并将 Chrome 中的输出文件夹作为解压扩展程序运行。这意味着它在“生产”中运行，并且根据 CRA 文档，源映射应该在生产中生成（请参阅create-react-app.dev/docs/advanced-configuration 中的 GENERATE_SOURCEMAP）。不是说所有的source map都会生成？
另外，我不想修改 webpack.config.js - 我宁愿放弃源地图。首先使用 Create React App 的一个重要原因（至少对我而言）是不必手动配置 webpack。