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

IT技术 reactjs webpack google-chrome-devtools babeljs firefox-developer-tools
2021-05-21 15:29:57

我正在尝试为使用 react 和 webpack 构建的大型 Web 应用程序添加可访问性。这需要从应用程序返回源文件。有没有办法查看代码最初来自哪个文件?检查元素和查看源代码很好,但我找不到生成代码的源文件的路径。有没有办法在开发工具(chrome 或 firefox 开发人员版)中做到这一点,或者我是否坚持在我的整个项目 src 文件夹中搜索将我指向该文件的代码?它是一个单页应用程序,所以它不像检查 url 那样容易。

编辑:我们也使用 babel

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

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目录中。