reactjs - Chrome DevTools 未显示正确的文件名

Question

我正在使用 ReactJS，在开发和使用 Google Chrome DevTools 时，我遇到了显示文件名的问题。

项目是使用create-react-app创建的。
我在控制台中得到 main.chunk.js 名称，我想要 src/Index.jsx 。

如何解决这个问题？

Answer 1

您正在寻找的称为源映射，它可以让 Chrome(和其他调试工具)知道缩小的 JS 包如何与原始代码相对应。

默认的 create-react-app 配置会创建源映射，但有几个设置可能会影响您所看到的内容。检查以下各项以确保生成源映射并且 Chrome 正在检测它们:

1. 在 Devtools 设置中的“源”下，确保选中“启用 JavaScript 源映射”。当您在开发工具中打开 bundle 时，应该会显示一条消息“检测到源映射”。您将在左侧面板中看到原始文件夹以橙色突出显示。

2. 确保 create-react-app config 中的 GENERATE_SOURCEMAP 环境变量未设置为 false 。您可能想尝试显式启用此功能。

3. 您可以在 node_modules/react-scripts/config/webpack.config.js 中检查 create-react-app 正在使用的 Webpack 配置文件。查找 devtool 选项，并尝试将其显式更改为 source-map 或 inline-source-map

4. 您可能需要设置自定义 Webpack 配置并选择另一个源映射选项 documentation 。 inline-source-map 和 source-map 选项是最好的，但请记住 inline-source-map 会增加几 MB到您的代码包。

要隔离问题，您可以创建一个新的默认 React 应用程序，并查看源代码是否显示在开发工具中。这将告诉您问题是否出在 Webpack/您的应用程序或开发工具中。