DevTools Panels

介紹

Chrome 開發者工具（Chrome Developer Tools，簡稱 DevTools）是一套內置於 Google Chrome 瀏覽器中的網頁開發和調試工具，可用來對網站進行迭代、調試和分析。

開啟方式

• Menu > 更多工具 > 開發者工具。
• 頁面元素上右鍵點擊，選擇 檢查。
• 使用快速鍵 ctrl + shift + i (Windows) 或 Cmd + Option + i (MacOS)。

面板介紹

開發者工具打開後可以看到上方有許多按鍵，在最左端兩個按鍵之後的各項稱為面板（panel），這些面板各司其值，由左至右地稍微介紹其功能：

設備模式（Device Toolbar）

隨著科技發展與行動裝置興起，網頁設計必須適當地偵測裝置尺寸或視窗大小來提供使用者最佳的瀏覽畫面，即所謂的響應式網頁設計（RWD, Responsive Web Design）。設備模式開啟後可以瀏覽頁面在行動裝置上所呈現的樣式：

Toggle Device Toolbar

元素面板（Elements Panel）

Elemental Panel

透過元素面板可以自由地查看與編輯文件物件模型（DOM, Document Object Model）和層疊樣式表（CSS, Cascading Style Sheets），此處的編輯操作是可以立刻在頁面上看到效果的。其中右邊提供了幾個嵌入的操縱板（pane） ：

• 樣式操縱板（Styles Pane）：用以查看與編輯元素的樣式。
• 計算操縱板（Computed Pane）：用以查看與編輯區塊模型的樣式。
• 事件操縱板（Event Listeners）：用以監控並調用事件。

控制台面板（Console Panel）

Console Panel

控制台面板提供了一個讀取 - 求值 - 輸出循環（REPL, Read-Eval-Print Loop）的交互式 JavaScript Shell 介面，可以在此處撰寫代碼並執行，常配合 console.log 語句使用。

資源面板（Sources Panel）

Sources Panel

資源面板將會顯示網頁上所載入的代碼資源，可以在其中透過設置斷點來對 JavaScript 代碼進行調試，並且能夠再添加本地文件夾到工作區（Workspaces）。

網路面板（Network panel）

Network Panel

網路面板顯示發出的請求與頁面載入所花費的時間，並詳細地顯示每一個網頁載入資源的時間點。

效能面板（Performance Panel）

Performance Panel

效能面板通過記錄和查看網站生命週期內發生的各種事件來提高頁面的運行時性能，除此之外可以查看頁面使否有記憶體洩漏問題以及 CPU 的使用狀況。

記憶體面板（Memory Panel）

Memory Panel

應用面板（Application Panel）

Application Panel

安全面板（Security Panel）

Security Panel

審查面板（Audits Panel）

Audits Panel