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

Posted 2023-03-07

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

【英文标题】：Find original source file path from inspect element in dev tools

【发布时间】：2019-03-30 12:35:58

【问题描述】：

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

编辑：我们也使用 babel

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

【问题讨论】：

你在使用像 babel 这样的编译器吗？？

是的忘了提到我们使用 babel

【参考方案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 目录中。

【讨论】：

我会向团队建议并回复您

这不是我真正想要的答案，但感谢您的尝试。我正在尝试查找源文件path，而不是查看开发工具中的源代码。以这种方式显示的代码并没有显示代码来自哪个文件

@MarcSlothEastman 如果有帮助，请检查我已经更新了答案。

这很有趣，很高兴知道，但我不知道如何在源选项卡中找到元素所在的文件。如果我右键单击-> 检查元素，它只会将我带到元素选项卡。我需要从页面转到源选项卡

Source 选项卡，您可以直接使用它，也有一些方法，您必须掌握调试技能，例如将调试器添加到某些侦听器，这样每当该侦听器触发时，它就会在该点停止并为您提供文件。