iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 5
3
Modern Web

你所不知道的各種前端 Debug 技巧系列 第 5

[Day 05] Elements - DOM

概覽

今天的文章主要會提到筆者在瀏覽、操作 DOM 結構時常用到或覺得不可不知的功能,雖然大部分的功能都很簡單或有很多種達成的方式,不過筆者的確因此省了不少時間呢,馬上就來看看有什麼新奇的玩意兒吧!

閱讀文章時建議搭配 Demo 頁面 Elements - DOM 一起使用,效果更佳。

DOM

== $0

有注意到開啟 Elements 面板時,標記的元素後方總會有個 == $0 嗎?

先 Inspect 一個元素後再到 Console 面板輸入 $0,會發現剛剛選中的元素出現在 Console 中!其實點選某個元素的時候,後方的 == $0 就說明了這件事,如果再多點幾個元素,還可以用 $1$2$3$4 (到此為止)來拿到前幾次選到的元素。

另外在 Console 中對元素按下右鍵,選擇 Reveal in Elements Panel 可以跳到該元素在 Elements 面板中的位置,對 Elements 面板的元素按下右鍵則有 Scroll to view 可以把視野滾到能看見元素的地方。

想要在 Console 面板中用 JavaScript 操作元素時,== $0 就非常方便,另外也可以搭配 console.dir($0) 來觀察元素的各個屬性,如果在 Console 直接輸入 $0 或是 console.log($0) 只會印出如 Elements 面板顯示的元素本身。

搜尋

按下 Command+F 會在下方跳出搜尋列,可以用字串或 CSS Selector 來找到元素。

編輯

元素的層級和順序可用拖曳來改變,另外還可以用 Command+CCommand+V 來複製貼上,那貼錯位置的話怎麼辦?直覺地按下 Command+ZCommand+Shift+Z 就可以 Undo 或 Redo 了。

沒錯,就是這麼簡單。

貼上元素的時候,會貼在選定元素的最後一個 Child,注意貼在 <input /> 等 Self-closed 元素內依然會出現在 DOM 結構,但不會顯示在頁面中。

右鍵選單

選中一個元素的時候,按下左邊的三個點點,或是對元素內按下右鍵會打開功能選單,以下會列出筆者認為值得一提的幾個功能。

為什麼強調元素內呢?如果右鍵是點在 Attribute、URL 上,選單會有不同的選項,例如在 URL 上點右鍵就會有 Reveal in Sources panelOpen in new tab 等等。

Hide element

如果有某個元素被遮住了無法選到,可以 Inspect 覆蓋的元素後按下 Hide element 或直接按鍵盤的 H,反覆做就能看到想要選取的元素,也能從左方的小圓圈看到哪些元素被隱藏了,其效果和 CSS 的 visibility: hidden; 相當,看不到也 Inspect 不到,但不影響原本的排版。

Now you see me.

Edit as HTML

修改單一個 Attribute 或是元素的內文時可以直接雙擊元素的內文部分開始編輯,尤其在新增元素時特別方便。

Copy

在爬蟲或是自動化測試的時候很方便,可以透過:

  • Copy Selector — 自動計算出一個 CSS Selector
  • Copy JS Path — 同上,複製為可找到該元素的 JavaScript 如 Document.querySelector([CSS Selector])

由於是自動產生的,並不保證 Selector 的效能或長度,不過可以確保會選到該元素。

Expand recursively

展開所有子元素,也可以按住 OptionAlt 點開有一樣的效果,不用一層一層慢慢點,另外筆者常常會用鍵盤的左右方向鍵來展開收合元素,也能搭配 OptionAlt 展開全部。

Break on

Break on 選項會在關於 Sources 面板的文章中提到,敬請期待。

結語

Elements 面板的介紹就到此告一段落,明天會開始進入 Console 面板篇。


上一篇
[Day 04] Elements - CSS 之 2
下一篇
[Day 06] Console - Messages & Settings
系列文
你所不知道的各種前端 Debug 技巧30

尚未有邦友留言

立即登入留言