Published on

Elements

Authors
  • avatar
    Name
    李丹秋
    Twitter

View DOM nodes

展示标尺

Setting>Preferences>Elements>Show rulers on hover 开启这个模式后，当选中元素节点的时候，会用标尺标注元素的位置信息。

搜索元素节点

在Element Tab下，Control + F,可以调起输入框，来搜索节点。

Access nodes in the console

当我们选中一个node之后，在控制台输入 $0，就可以直接拿到选中的元素

Copy JS path

选中一个元素，右键选择Copy>Copy JS Path，就可以直接生成一段查询元素的js代码

Badges reference

比较有意思的功能,如图所示，如果一个元素中具备flex、grid等样式，在元素旁边可以开启检查模式，方便看容器中的布局

View and change CSS

可以通过以上方式，快速切换颜色格式。拾色器也能够去识别屏幕上任何颜色（Chrome之外也可以）

Discuss on Twitter • View on GitHub