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 设置中的 Sources 下，确保选中“Enable JavaScript source maps”。当您在 Devtools 中打开包时，应该有一条消息说“检测到源地图”。您会在左侧面板中看到以橙色突出显示的原始文件夹。

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

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

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

为了隔离问题，您可以创建一个新的默认 React 应用程序，并查看源代码是否显示在 Devtools 中。这将告诉您问题是在 Webpack/您的应用程序还是 Devtools 中。

Answer 2

这是因为 React 将所有文件编译成一个包并为其命名。但是，您可以进入“源”选项卡并查看其中的文件（如果它像 next.js 中那样编译到静态文件夹中）。默认情况下不支持没有哈希名称。然而，文档确实建议您可以这样做，但您必须弹出并自定义配置 webpack。