Chrome Dev Tools - Is there a way to show matching tag in DOM when you hover over its counterpart?

和自甴很熟 提交于 2020-01-06 01:58:09

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!