Find original source file path from inspect element in dev tools

Question

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

Pop

Are You using any transpilers like babel ?? – Cynthiacynthie

Yes forgot to mention that we use babel – Pop

Answer 1

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"

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.

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.

Cynthiacynthie

I will suggest this to the team and get back to you – Pop

This isn't the answer I'm looking for actually, but thanks for trying. I am trying to find the source file path, not look at the source code in dev tools. The code displayed in this way does not show which file the code came from – Pop

@MarcSlothEastman please check i've updated the answer if this helps. – Cynthiacynthie

This is interesting and good to know, but I don't know how to find which file an element is in in the source tab. If I right click -> inspect element, it just brings me to the elements tab. I need to go from the page to the source tab – Pop

Source tab you can directly go for that also there are ways then you have to master your debug skills for example adding debugger to some listeners so whenever that listener triggers it will stop at that point and gives you the file. – Cynthiacynthie

Answer 2

Click on source and the projectfiles will be under webpack://

Osullivan