Making Webstorm editor to point to code block of element which I clicked on the webpage in debug mode.

I want to know how to make Webstorm editor to highlight the code block when clicking on the particular element on the webpage in debug mode. for example :- When I click a table header in webpage open in debug mode it should highlight the table header code in Webstorm editor. 

Currently, Brackets editor have such a feature and I really want to know does Webstorm have this feature. If yes, please guide me how to activate this feature.

4 comments

WebStorm bundles Live Edit plugin (live update in Chrome while editing HTML/CSS/javascript/... in Webstorm, https://confluence.jetbrains.com/display/WI/Live+Edit), but it is a one-way feature - it works from IDE to browser, but not vice versa: you can highlight DOM element in browser by clicking the code block in editor, but can't navigate from browser to editor.
we have 2 feature requests for a possibility to keep the code in-sync when editing it in the browser - http://youtrack.jetbrains.com/issue/WEB-9557 and http://youtrack.jetbrains.com/issue/WEB-8814; please feel free to vote for them. I can also suggest trying the CSS-X-Fire plugin (http://plugins.jetbrains.com/plugin/5348?pr=phpStorm)

0

I have uploaded a youtube video https://www.youtube.com/watch?v=ltQoN4zJbY8 so that you can understand clearly what I am asking for. This Feature is currently in Brackets Editor.

0

I do understand what you asked for. please read my previous comment - I have nothing to add

0

It is really disappointing to hear that WebStorm does not have such a feature While a simple editor like Brackets has.  

0

Please sign in to leave a comment.