Chrome DevTool 如何查看 DOM 节点

 时间:2024-10-12 15:17:10

1、打开 Chrome DevTool:(1犬匮渝扮)按 "F12";(2)在 Chrome浏览器的右上角,点击最右侧的图标,在菜单选择“更多工具”-> “开发者工具”。

Chrome DevTool 如何查看 DOM 节点

2、我们可以调整 Chrome DevTool的位置,例如:可以选择 DevTool在浏览器的底部,左侧,右侧或者悬浮。

Chrome DevTool 如何查看 DOM 节点Chrome DevTool 如何查看 DOM 节点

3、点击 Chrome DevTool工具栏上最左侧的图标,将鼠标移动到要定位的页面元素,点击相应元素即可查看该元素的 DOM 信息。

Chrome DevTool 如何查看 DOM 节点

4、在页面元素,点击鼠标右键,在菜单中选择“检查”,可查看该元素的 DOM信息。

Chrome DevTool 如何查看 DOM 节点

5、按下快捷键“CTRL + F”,在搜索对话框输入相应信息,可查看对应的 DOM 信息。

Chrome DevTool 如何查看 DOM 节点

6、在查看 DOM信息时,点击左侧的“...”符号,在弹出菜单,选择 expand recursively,展开 DOM信息。

Chrome DevTool 如何查看 DOM 节点

7、总结:Chrome DevTool 可以让我们轻松方便地查看页面的DOM节点信息,是前端工程师必不可必的开发利器。

  • li的缩进(li列表项的左边有一大块空白)
  • 杀手3剧本“逃出舞会”过关流程攻略
  • Keil uVision4怎么关闭发出嘟嘟声时
  • css怎么改变div背景颜色
  • vb.net怎么读取图片上的数字
  • 热门搜索
    audio什么意思 说明方法及作用 有什么好听的英文歌 什么是自贸区 谷维素片的功效与作用 伤官什么意思 东莨菪碱的作用 花旗参的功效与作用 双鱼女和什么座最配 弯弯曲曲的什么