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

Question

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

编辑：我们也使用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目录中。