从开发工具中的检查元素中查找原始源文件路径

Question

我正在尝试为使用 React 和 webpack 构建的大型 Web 应用程序添加可访问性。这需要从应用程序返回源文件。有没有办法查看代码最初来自哪个文件？检查元素和查看源代码很好，但我找不到生成代码的源文件的路径。有没有办法在开发工具（chrome 或 firefox 开发人员版）中执行此操作，或者我是否一直在搜索整个项目 src 文件夹中查找将我指向该文件的代码？它是一个单页应用程序，因此不像检查网址那么容易。

编辑：我们也使用 babel

EDIT2：更改名称以澄清我正在寻找文件的原始源代码路径

Answer 1

为此，您必须使用 .babelrc 并将此行添加到文件中

"sourceMaps": true

在

chrome > source tab

添加此内容后，它将显示所有与代码同名的文件，并且代码也将是 es6 或更高版本（与您编写的相同）。

示例配置：

{
  "presets": ["es2015"],
  "plugins": [
    "transform-object-rest-spread",
    [
      "import",
      {
        "libraryName": "lib",
        "libraryDirectory": "./src"
      }
    ],
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "database": "./src/database",
        "localization": "./localization",
        "utils": "./utils"
      }
    }]
  ],
  "sourceMaps": true
}

如果您还有其他问题，请告诉我。

要获取文件路径，您可以右键单击文件标题选项卡，然后单击“在侧边选项卡中显示”

如果您想打开文件，只需按

cmd + p

并搜索文件名，您将看到 2 个具有相同名称的文件。你必须打开一个没有

webpack-internal

前缀的女巫。

您还可以打开侧边选项卡，在那里您将找到与项目中相同的文件夹结构。在

webpack

目录。

Answer 2

单击

source

，项目文件将位于

webpack://

下