web开发者工具 - chrome-devtools

Chrome DevTools是Google Chrome浏览器为web开发者提供的工具。

打开DevTools

通用方法

右键页面,选择“检查”。

快捷键

Command+ Option+ C(Mac)
Control+ Shift+ C(Windows,Linux,Chrome OS)

查看DOM

检查节点

对特定DOM节点感兴趣时,打开DevTools(F12),通过Inspect选中需要调查的节点。

点击DevTools左上角Inspect检查图标。

键盘导航DOM树

点击页面元素选择DevTools中的Inspect图标。

在DOM树中选中元素,可以使用键盘导航DOM树。

使用上下键,顺序选择当前元素的前后兄弟节点。

通过左右方向键,展开和关闭当前节点的子节点。

连续左方向键,依次关闭已展开的DOM节点。

连续右键依次打开未展开的DOM元素。

搜索节点

通过字符串、CSS选择器,或XPath选择器搜索DOM树。将光标对准[Element]面板。

使用快捷键:

Control+F或Command+ F(Mac)

将打开位于DOM树底部的搜索栏。输入:

关键字、CSS选择器、XPath选择器。

编辑DOM

动态编辑DOM树,查看修改后的元素如何影响当前页面,调试页面时经常用到。

编辑内容

选中编辑节点,双击DOM树中的内容即可编辑。

编辑属性

编辑属性,双击属性名称或值。

添加属性

双击选中元素,按右方向键,添加空格,输入

style="background-color:gold"

回车,节点属性变成黄金色。

编辑节点类型

编辑节点类型,双击该类型,输入新类型。

重新排序DOM节点

拖动节点重新排序。

查看css伪类

查看css伪类(:active,:hover,:focus, :visited,:focus-within),先在页面选中元素,然后,点选Style左边的伪类菜单:hov

勾选所需的伪类。

隐藏节点

快速隐藏dom元素,在dom树中选中元素,按H键。

元素会在页面中消失。

再次按下H键,节点再次出在页面中。

删除节点

在dom树中选中元素,按Delete键删除节点。

按Control+ Z或Command+ Z(Mac),撤消上一个操作,并重新显示该节点,可连续撤消。

访问dom节点

DevTools支持从控制台访问DOM节点或获取JavaScript引用。

控制台中使用$0引用当前选定的dom节点,可以用变量接收dom节点,如:

a =$0

存储全局变量

若需要多次使用一个dom节点,可将其存储为全局变量。

在dom中选中节点,右键菜单中选择[Store as global variable]。

Console中输入temp1即可看到变量引用的dom节点。

断点调试DOM

DevTools允许在JavaScript修改DOM时暂停页面的JavaScript,观察DOM的变化过程。

Break on attribute modifications

若要查看引发节点属性发生变化的JavaScript,使用attribute modification breakpoints选项。

在DOM树中选中节点,右键选择

[Break on] ->[attribute modification]

对DOM节点加入断点,若脚本修改此DOM节点时,会被加入的断点阻塞。

也可使用此方式给子节点加入断点

[Break On] > [Subtree Modifications]