美文网首页
Chrome浏览器DevTools小技巧

Chrome浏览器DevTools小技巧

作者: 狂奔的胖蜗牛 | 来源:发表于2023-12-06 10:23 被阅读0次

1.搜索DOM树中的节点

image.png

在元素tab下，按command+f，进入搜索。


image.png

可以在里面输入字符串、css选择器或者xpath来进行搜索。

2.界面滚动到指定元素的位置

image.png

在元素中，右键点击要滚动到的元素，然后选择滚动到视野范围内即可。

3.从控制台访问节点

在元素tab中，点击了某个元素后，后面会有一个0的标志，此时，在控制台，我们输入0即可获取到该元素。

image.png
或者在元素tab中，右键点击某个元素，然后选择复制->复制js路径，然后在控制台粘贴，也可以快速获取到元素。
image.png
还有中方式，就是将元素存储为全局变量，控制台就会自动打印出来。
image.png

相关文章

网友评论

      本文标题：Chrome浏览器DevTools小技巧

      本文链接：https://www.haomeiwen.com/subject/fbkjgdtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Chrome浏览器DevTools小技巧|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！