Find original source file path from inspect element in dev tools - reactjs

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

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.