【Debug】 你所知道的Elements - DOM---第五天

概览

今天的文章主要会提到笔者在浏览、操作DOM 结构时常用到或觉得不可不知的功能,虽然大部分的功能都很简单或有很多种达成的方式,不过笔者的确因此省了不少时间呢,马上就来看看有什么新奇的玩意儿吧!

阅读文章时建议搭配Demo页面Elements - DOM一起使用,效果更佳。

DOM

$0
有注意到开启Elements面板时,标记的元素后方总会有个== $0吗?

先Inspect一个元素后再到Console面板输入$0,会发现刚刚选中的元素出现在Console中!其实点选某个元素的时候,后方的== $0就说明了这件事,如果再多点几个元素,还可以用$1、$2、$3、$4(到此为止)来拿到前几次选到的元素。
【Debug】 你所知道的Elements - DOM---第五天

另外在Console中对元素按下右键,选择Reveal in Elements Panel可以跳到该元素在Elements面板中的位置,对Elements面板的元素按下右键则有Scroll to view可以把视野滚到能看见元素的地方。
【Debug】 你所知道的Elements - DOM---第五天
想要在Console面板中用JavaScript操作元素时,== $0就非常方便,另外也可以搭配console.dir($0)来观察元素的各个属性,如果在Console直接输入$0或是console.log($0)只会印出如Elements面板显示的元素本身。

【Debug】 你所知道的Elements - DOM---第五天

搜寻

按下Command+F会在下方跳出搜寻列,可以用字串或CSS Selector来找到元素。
【Debug】 你所知道的Elements - DOM---第五天

编辑

元素的层级和顺序可用拖曳来改变,另外还可以用Command+C、Command+V来复制贴上,那贴错位置的话怎么办?直觉地按下Command+Z或Command+Shift+Z就可以Undo或Redo了。
【Debug】 你所知道的Elements - DOM---第五天
没错,就是这么简单。

贴上元素的时候,会贴在选定元素的最后一个Child,注意贴在等Self-closed元素内依然会出现在DOM结构,但不会显示在页面中。

右键选单

选中一个元素的时候,按下左边的三个点点,或是对元素内按下右键会打开功能选单,以下会列出笔者认为值得一提的几个功能。

为什么强调元素内呢?如果右键是点在Attribute、URL上,选单会有不同的选项,例如在URL上点右键就会有Reveal in Sources panel、Open in new tab等等。
【Debug】 你所知道的Elements - DOM---第五天

Hide element

如果有某个元素被遮住了无法选到,可以Inspect覆盖的元素后按下Hide element或直接按键盘的H,反覆做就能看到想要选取的元素,也能从左方的小圆圈看到哪些元素被隐藏了,其效果和CSS的visibility: hidden;相当,看不到也Inspect不到,但不影响原本的排版。
【Debug】 你所知道的Elements - DOM---第五天
Now you see me.

Edit as HTML

修改单一个Attribute 或是元素的内文时可以直接双击元素的内文部分开始编辑,尤其在新增元素时特别方便。
【Debug】 你所知道的Elements - DOM---第五天

Copy

在爬虫或是自动化测试的时候很方便,可以透过:

Copy Selector — 自动计算出一个CSS Selector
Copy JS Path — 同上,复制为可找到该元素的JavaScript 如 Document.querySelector([CSS Selector])
【Debug】 你所知道的Elements - DOM---第五天
由于是自动产生的,并不保证Selector 的效能或长度,不过可以确保会选到该元素。

Expand recursively

展开所有子元素,也可以按住Option或Alt点开有一样的效果,不用一层一层慢慢点,另外笔者常常会用键盘的左右方向键来展开收合元素,也能搭配Option或Alt展开全部。
【Debug】 你所知道的Elements - DOM---第五天
Break on
Break on 选项会在关于Sources 面板的文章中提到,敬请期待。

结语
Elements 面板的介绍就到此告一段落,明天会开始进入Console 面板篇。

上一篇:【GDB】print 操作打印完整字符串


下一篇:01_动态数组