Chrome 開發人員工具有多種開啟方式。從這份完善的參考資料中選擇您喜歡的方式。
您可以透過 Chrome UI 或鍵盤存取開發人員工具:
- 使用 Chrome 的下拉式選單。
- 可使用專屬的快速鍵開啟「元素」、「控制台」,或您上次使用的面板。
此外,請參閱這篇文章,瞭解如何自動開啟每個新分頁的開發人員工具。
從 Chrome 選單開啟開發人員工具
如果您偏好使用使用者介面,可以透過 Chrome 的下拉式選單存取開發人員工具。
開啟「元素」面板並檢查 DOM 或 CSS
如要進行檢查,請在網頁上的元素上按一下滑鼠右鍵,然後選取「檢查」。
開發人員工具會開啟「Elements」面板,然後在 DOM 樹狀結構中選取元素。在「Styles」窗格中,您會看到已套用至所選元素的 CSS 規則。
從 Chrome 主選單開啟你上次使用的面板
如要開啟上一個開發人員工具,請按一下網址列右側的 按鈕,然後依序選取「更多工具」 >「開發人員工具」。
或者,你也可以使用捷徑開啟最後一個面板。詳情請參閱下一節的說明。
使用以下快速鍵開啟的面板:元素、控制台或最後一個面板
如果您偏好使用鍵盤,請根據您的作業系統在 Chrome 中按下快速鍵:
OS | 元素 | 控制台 | 上一個面板 |
---|---|---|---|
Windows 或 Linux | Ctrl Shift C 鍵 | Ctrl Shift J 鍵 | F12 Ctrl Shift I 鍵 |
Mac | Cmd Option C 鍵 | Cmd Option J 鍵 | Fn F12 鍵 Cmd Option I 鍵 |
記住快速鍵的簡單方式:
- C 代表 CSS。
- JavaScript 適用的 J。
- I 則指定您的選擇。
「C」C捷徑會在 檢查器模式中開啟「Elements」C面板。當你將遊標懸停在頁面的元素上時,這個模式會顯示實用的工具提示。您也可以按一下任何元素,在「Elements」(元素) >「Styles」(樣式) 窗格中查看 CSS。
如需開發人員工具快速鍵的完整清單,請參閱「鍵盤快速鍵」。
在每個新分頁自動開啟開發人員工具
透過指令列執行 Chrome 並傳遞 --auto-open-devtools-for-tabs
旗標:
結束任何執行中的 Chrome 執行個體。
執行您最愛的終端機或指令列應用程式。
根據您的作業系統執行下列指令:
MacOS:
open -a "Google Chrome" --args --auto-open-devtools-for-tabs
Windows:
start chrome --auto-open-devtools-for-tabs
Linux:
google-chrome --auto-open-devtools-for-tabs
開發人員工具會自動開啟所有新分頁,直到關閉 Chrome 為止。
後續步驟
接下來,請觀看以下影片,瞭解可提升開發人員工具的實用快速鍵和設定。
如需更多實作學習體驗,請參閱如何自訂開發人員工具。