从开发工具中的检查元素查找原始源文件路径 [英] Find original source file path from inspect element in dev tools

问题描述

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

I am trying to add accessibility to a large web application built with react and webpack. This requires going back to the source files from the app. Is there a way to see which file the code originally came from? Inspect element and view source are nice but I can't find the path to the source file where the code was generated from. Is there a way to do this in dev tools (chrome or firefox developer edition) or am I stuck with searching my entire project src folder for code that will point me to the file? It is a single page application so it is not as easy as checking the url.

我们也使用 babel

we also use babel

更改名称以说明我正在寻找文件的原始源代码路径

changed name to clarify I am looking for the original source code path to the file

推荐答案

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

for that you have to use .babelrc and add this line into file

"sourceMaps": true在 chrome > 中添加此内容后源标签 它将显示与代码同名的所有文件，并且代码也将在 es6 或以上(与您编写的相同).

"sourceMaps": true after adding this in chrome > source tab it will show all the files with same name as code and the code also will be in es6 or above (same as what you write).

示例配置:

{
  "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
}

如果您还有任何其他问题，请告诉我.

Let me know if you have any other issue still.

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

For getting file path you can right click on the file title tab and click on "Reveal in sidetab"

如果你想打开文件，只需按 cmd + p 并在那里搜索文件名，你会看到 2 个同名的文件.你必须打开一个没有 webpack-internal 前缀的女巫.

if you want to open file just press cmd + p and search for file name there you will see 2 files with same name. you have to open one witch dont have webpack-internal prefixed.

您也可以打开侧边选项卡，在那里您会找到与项目中相同的文件夹结构.在 webpack 目录中.

Also you can open side tab and there you will find your same folder structure as you do have in your project. in webpack dir.

这篇关于从开发工具中的检查元素查找原始源文件路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！