Chrome DevTools 未显示正确的文件名答案

【问题标题】：Chrome DevTools not showing correct file nameChrome DevTools 未显示正确的文件名
【发布时间】：2020-07-24 10:28:27
【问题描述】：

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

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

如何解决这个问题？

【问题讨论】：

【解决方案1】：

我遇到了类似的问题，而且只在 Chrome 中。检查后，我意识到问题是React Developer Tools Chrome 扩展。当我禁用它时，问题就解决了。

【讨论】：

【解决方案2】：

您可以在没有create-react-app 的情况下创建新项目。在您的 webpack.config.js 文件中，确保启用源映射 (https://webpack.js.org/configuration/devtool/)。你应该得到这样的结果：

{
    mode: "development"
    devtool: "inline-source-map"
    output: {
        index: "./index.js"
    }
    // more configuration
}

Sourcemaps 基本上将源（您的 react JSX 文件）中的行映射到输出的包（0.chunk.js 或 main.chunk.js 在您的情况下）。

【讨论】：

【解决方案3】：

您要查找的内容称为源映射，它可以让 Chrome（和其他调试工具）知道缩小的 JS 包与原始代码的对应关系。

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

在 Devtools 设置的 Sources 下，确保选中“Enable JavaScript source maps”。当您在 Devtools 中打开包时，应该有一条消息说“检测到源映射”。您会在左侧面板中看到以橙色突出显示的原始文件夹。
确保GENERATE_SOURCEMAPS 环境变量未在create-react-app config 中设置为false。您可能想尝试明确启用此功能。
您可以检查 node_modules/react-scripts/config/webpack.config.js 中使用的 Webpack 配置文件 create-react-app。查找devtool 选项并尝试将其显式更改为source-map 或inline-source-map
您可能需要设置自定义 Webpack 配置并选择另一个源映射选项 documentation。 inline-source-map 和 source-map 选项最好，但请记住，inline-source-map 会为您的代码包增加几 MB。

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

【讨论】：

【解决方案4】：

来自create-react-appdocumentation：

您无需安装或配置 Webpack 或 Babel 等工具。它们是预先配置和隐藏的，因此您可以专注于代码。

所以你有两种方法：

1- 从头开始创建您的项目并定义您的 Webpack 配置文件。

2- 更改 create-react-app Webpack 配置文件（您可以使用 this answers 找到该文件）。

在 Webpack 中更改块名称的任何一种方式都需要在 Webpack 配置文件（通常是 webpack.config.js）中定义所需的块名称：

module.exports = {
  //...
  output: {
    //...
    chunkFilename: '[id].js'
  }
};

更多详情here。

您还可以使用SplitChunksPlugin 拆分块文件。更多详情here。

【讨论】：

【解决方案5】：

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

【讨论】：