Is it possible to "inspect in browser and jump to that element in WebStorm(or PhpStorm)"

Question

In chrome-devtools to inspect a element, what you need to do is just click the element and then chrome will find you that element in html-code automatically.

On the other hand, editing in the IDE (PhpStorm), you have to find the element yourself, which is totally painful, time‐consuming work! Copy the text in browser, jump to IDE search that text, that's what I always have to do...

I know that in PhpStorm there is a plugin called "Live Edit". But it's "PhpStorm To Chrome", want I want is "Chrome To PhpStorm"!

And I found this video, this feature is exactly what I want!

https://www.youtube.com/watch?v=UzyoT4DziQ4#t=23m49s (at 23:49)

Does anybody know if there is a way to "inspect in browser and jump to that element in PhpStorm"?

Answer 1

No, there is no such feature in WebStorm; please vote for WEB-9557 Note that the page loaded in Chrome currently has a "Inspect in WebStorm" context menu action. But this action just starts a debug session for page currently loaded in browser. Theoretically it should also show the page in debugger Elements tab - but it doesn't (http://youtrack.jetbrains.com/issue/WEB-10822)

Answer 2

As an option to try:

1. Install Chrome extension https://chrome.google.com/webstore/detail/open-in-intellij/gpmmlokoechmmeboecialijibkjajlaj (https://github.com/bernhardc/open-in-intellij);
2. As I'm using React - select an element in React dev tools and click View source for this element;
3. Then right-click for the file in tab and click Open using Open in IntelliJ
4. And you're in the WebStorm (or what you're using). But good to have more quick navigation with less steps...