问题
In Firefox Inspector, if you hover over a <div>
in the DOM, the corresponding </div>
gets highlighted too. Great!
How can you do something similar in Chrome Dev tools? I can't seem to find how to find the counterpart tag. I find myself visually trying to eye where the matching tag is, or try to move my mouse straight up and down to find it... seems there is a better way.
Even IE dev tools shows a vertical line connecting the opening and closing tags.
It's hard for me to believe that Chrome doesn't have a similar method for finding this. Any ideas?
回答1:
This just automagically showed up as a new feature in Chrome a couple days ago.. (with the vertical line style, like IE dev tools) Thank you Chrome devs.
回答2:
I'm not sure if DevTools has the exact functionality you're looking for, but:
Open up your file in the Sources panel, double-click on a tag to highlight its text, and all matching instances of that text are outlined.
If you select a tag in the Elements panel and press left and right arrows, you can expand / collapse all children of the selected tag.
And, of course, if you edit a tag in the Elements panel, the closing tag is automatically updated, too.
来源:https://stackoverflow.com/questions/36343327/chrome-dev-tools-is-there-a-way-to-show-matching-tag-in-dom-when-you-hover-ove