1

I am using

chrome.devtools.inspectedWindow.getResources(allFiles => {})

It works, but I get the webpack compiled code and not the original React files. In the chrome source panel, it shows the original files using source maps. Can access the original files from chrome devtools? Please help with any pointers.

Abdulaziz Alaboudi
  • 61
  • 5

1 Answers1

0

Can you try react-dev-tools extension enter image description here

Selecting the react component and clicking the <> on top-right will take you to its React component source code. More info at https://reactjs.org/blog/2014/01/02/react-chrome-developer-tools.html

brijesh-pant
  • 967
  • 1
  • 8
  • 16
  • I am building a tool similar ti react-dev-tools, do you know how they did that programmatically? – Abdulaziz Alaboudi Jul 26 '20 at 22:59
  • Take a look here in source code https://github.com/facebook/react/blob/master/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js – brijesh-pant Jul 26 '20 at 23:10
  • @AbdulazizAlaboudi I am curious. What tool are you building? – bvaughn Oct 30 '20 at 12:45
  • Hi @bvaughn, I am building a new debugger that incorporates static analysis of developers react code to help them beyond what existing debugging tools offer. You know, most existing tools focus on helping developers navigate and inspect program states, which I believe is something important but there are other things that developers may want help with while debugging. Part of what I am trying to do is to get the original react source files and analyze them. However, I have not found a reliable way to do that. Do you have any suggestions? – Abdulaziz Alaboudi Oct 31 '20 at 14:33
  • Maybe you can open a GitHub issue on the React repo to tell me more about your idea. Stack Overflow isn't the easiest place to have this kind of discussion. I'd be curious to hear more about what you have in mind. – bvaughn Nov 01 '20 at 15:34