Find original source file path from inspect element in dev tools

user_5570385 0
Viewed 39127

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.

EDIT: we also use babel

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

firefox-developer-tools babeljs webpack reactjs google-chrome-devtools
1 Answers

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

"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).

example config:

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

enter image description here

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.

enter image description here

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.

user_70120180
Related