CODEWITHSUNDEEP
google-chrome-extensiongoogle-developer-tools
superkinhluan
superkinhluan

Reputation: 784

Show source file of objects in Chrome developer tools

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.

Upvotes: 0

Views: 1520

Answers (1)

superkinhluan
superkinhluan

Reputation: 784

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.

Upvotes: 0

Related Questions