Show source file of objects in Chrome developer tools

superkinhluan 0
Viewed 15

When I use the React Developer Tools, I notice that it can show me the source code of the selected component. It's the button on the upper right corner of the Components panel.

View source button in React Developer Tools

When I click this button, it opens the source file in the Sources panel.

I'm writing a developer tool myself and I want to do something similar to this. How does the React Developer Tools do it? I didn't see any API in the documentation to do this sort of thing.

google-developer-tools google-chrome-extension
1 Answers

Thanks to @wOxxOm's comment, I was able to find the source code of this button. Turns out we just need to call chrome.devtools.inspectedWindow.eval('window.inspect(...)') passing the object that represents the component. Chrome/Edge will take care of find the source code and show it in the Sources panel.

superkinhluan0
Related