【程式】Chrome DevTools 教學 // todo

by Posted on

最後更新日期：2024年10月16日

開啟 DevTools 方式

  1. 按 F12
  2. 對元素按右鍵 > 檢查(Inspect)

調整 DevTools 視窗位置

DevTools 右上角 > 點擊垂直三點(Customize and control DevTools > docker side > 選擇你喜歡的顯示為置(新視窗、左邊、下面、右邊)

一般都是顯示在右邊，如果你的元素在右邊，可以選擇顯示在左邊，會比較方便哦～

結構: Panel, Drawer

學習前哨站

DOM

ELEMENT

一共有 11個面板( Panel )，依序是 Element, Console, Sources, Network, Performance, Memory, Application, Security, Lighthouse, Recorder, Performance insights

其中開發人員最常用到的只有 4個 Element, Console, Sources, Network

左上角第一個 icon 是方框加箭頭，可以點選元素，顯示該元素內容在 DOM 視窗和 CSS 樣式在 CSS 視窗

左上角第二個 icon 是筆電跟手機，

Elements

功能: 查看 DOM 結構、查看與修改 CSS 樣式，即時預覽效果

視窗分為 DOM 結構視窗跟 CSS 視窗

DOM 結構視窗

  • Add attribute: 增加屬性
  • Edit text: 修改文字內容，即時看見效果
  • Edit attribute: 修改屬性
  • Edit as HTML: 以 HTML 方式修改，比較方便
  • Duplicate element: 複製元素
  • Delete element
  • Cut
  • Copy: 爬蟲時很方便
    • Copy element
    • Copy outerHTML
    • Copy XPath
    • Copy full XPath
  • Paste
  • Hide element
  • Force state
    • :active: 模擬滑鼠點擊該元素
    • :hover: 模擬滑鼠移動到該元素
    • :focus: 模擬滑鼠指標在輸入框時
    • :visited: 點擊連結過
    • :focus-within: 點擊輸入框、下拉選單時
    • :focus-visible: 以非滑鼠，如鍵盤的 Tab 聚焦在元素時
  • Break on
  • subtree modifications
  • attribute modifications
  • node removal
  • Expand recursively: 打開所有元素
  • Collapse children
  • Capture node screenshot
  • Scroll into view: 畫面滾動至該元素
  • Focus: 跳至選取的元素
  • Badge settings
  • Store as global variable

== $0 代表目前選取的元素代表 $0

在下方的 Console 面板輸入 $0，會印出剛剛選取的元素

$0 的使用時機

CSS 視窗

Styles 分頁

功能: 查看與修改 CSS 樣式

特性: style 樣式按優先度由上到下排序

還可以新增 Style 哦

上方工具列

Filter

:hov

.cls: 加入現有的 class 樣式

New Style Rule: 新增一個 Style 規則到目前選取的元素，可以編輯規則，按住後會出現下拉選單，可以選擇新規則要放入的 CSS 檔案，只是新增後無法刪除

tips: 新增 Style 規則後，選擇其他元素，可以透過 .cls 的 Add new class 加入剛剛新增的 Style 規則

Show Computed Styles sidebar: 右側顯示 Computed 面板

Shadow Editor

Color Editor

取色器

Color Palette

:hov 分頁

切換元素狀態，不用一直手動去觸發事件

state:

  • :active
  • :hover
  • :focus
  • :visited
  • :focus-within
  • :focus-visible
  • :target

.cls 分頁

功能: 增加新類別(Add new class)

Computed 分頁

功能: 所有元素 style 屬性( property )清單，因在 style 分頁有點雜亂，在 computed 分頁可以透過 filiter 快速找到屬性值( value )、透過 Box modal 調整 margin, border, padding。

Layout 分頁

Event Listeners 工具分頁

功能: 快速查看 action，可點擊連結跳轉至 Source 分頁，並設定中斷點。

tips: 點擊元素 > 查看 Event Listeners 分頁 > 點開對應動作的選單 > 點擊檔案連結 > 跳轉至 Sources 面板對應的檔案

Console

對印出的元素 > 右鍵 > Reveal in Elements panel，

可以看到該元素在 DOM 視窗的位置

Console Message Level
  • Verbose
  • Info
  • Warnings
  • Errors
Verbose

verbose (adj.) 囉嗦的, 詳細的

因為很囉嗦，所以預設不會顯示這類資訊，

如果要看的話，點擊 Default levels > 勾選 verbose，

就可以看到訊息囉。

延伸閱讀:【程式】console.debug使用時機 – 小書僮

console.debug()

Info

這個就是我們最常用的 console.log() 也可以使用 console.info()，兩者是相同的

Warnings

目的: 提示開發人員的警告訊息，例如: 方法 deprecated, 潛在問題

延伸閱讀: 【Chrome DevTools】console.warn使用時機

console.warn()

訊息框會呈現黃色，旁邊有驚嘆號符號，具警告意味，可以打開看到 function 的 call stack，會顯示警告訊息的檔案位置與行數。

Errors

目的: 代表嚴重錯誤，造成程式無法正常執行

訊息框會呈現紅色，旁邊有叉叉符號，可以打開看到 function 的 call stack，會顯示錯誤訊息的檔案位置與行數。

console.error

console.count: 計算 value 印出的次數。

console.group: 在雜亂的訊息中，把特定訊息分類為一個群組，方便搜尋。

console.table: 以表格形式呈現陣列資料

console.time: 計算時間

console.timeLog

console.timeEnd

console.trace: call stack，方便得知程式碼位置

Sources

Network 分頁

功能: 紀錄每個請求( request ) 的狀態，可以看 request 是否成功、回應( response )的結果等等，並且可以對 request 進行篩選、排序。

類型

Fetch/XHR

Doc

CSS

JS

Font

Img

Media

Manifest

WS

Wasm

Other

Performance

Memory

Application

Security

Lighthouse

Recorder

Performance insights

Post Views: 31

Published by 小書僮