前端開發必備之Chrome開發者工具（上篇）

本文介紹的 Chrome 開發者工具基於 Chrome 65版本，如果你的 Chrome 開發者工具沒有下文提到的那些內容，請檢查下 Chrome 的版本

簡介

Chrome 開發者工具是一套內置於 Google Chrome 中的Web開發和調試工具，可用來對網站進行迭代、調試和分析

打開 Chrome 開發者工具的方式有：

• 在Chrome菜單中選擇 更多工具 > 開發者工具

• 在頁面元素上右鍵點擊，選擇 “檢查”

• 使用 快捷鍵 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)。更多快捷鍵https://developers.google.com/web/tools/chrome-devtools/shortcuts

Chrome 開發者工具主要包含以下10個部分：

1. 設備模式（device toolbar）
2. 元素面板（Elements）
3. 控制台面板（Console）
4. 源代碼面板（Sources）
5. 網絡面板（Network）
6. 性能面板（Performance）
7. 內存面板（Memory）
8. 應用面板（Application）
9. 安全面板（Security）
10. 主菜單（Customize and control DevTools）

設備模式（device toolbar）

使用 Chrome DevTools 的 Device Mode 打造移動設備優先的完全自適應式網站

該模式不可替代真實設備測試

切換 Device Mode 按鈕可以打開或關閉 Device Mode

選擇設備

通過該視圖控件，你可以設定下面兩種模式：

1. 自適應。 使視口可以通過任意一側的大手柄隨意調整大小
2. 特定設備。 將視口鎖定為特定設備確切的視口大小，並模擬特定設備特性

媒體查詢

媒體查詢是自適應網頁設計的基本部分。要查看媒體查詢檢查器，請在三圓點菜單中點擊 Show Media queries。DevTools會在樣式表中檢測媒體查詢，並在頂端標尺中將它們顯示為彩色條形

用彩色標記的媒體查詢示例如下：

快速預覽媒體查詢

點擊媒體查詢條形，調整視口大小和預覽適合目標屏幕大小的樣式

查看關聯的 CSS

右鍵點擊某個條形，查看媒體查詢在 CSS 中何處定義並跳到源代碼中的定義

元素面板（Elements）

使用元素面板可以自由的操作DOM和CSS來迭代布局和設計頁面

編輯樣式

使用 Styles 窗格可以修改與元素關聯的 CSS 樣式

添加、啟用和停用 CSS 類

點擊 .cls 按鈕可以查看與當前選定元素關聯的所有 CSS 類。 從這里，您可以執行以下操作：

• 啟用或停用當前與元素關聯的類
• 向元素添加新類

添加或移除動態樣式（偽類）

您可以在元素上手動設置動態偽類選擇器（例如 :active、:focus、:hover 和 :visited）

可以通過兩種方式在元素上設置動態狀態：

• 在 Elements 面板內右鍵點擊某個元素，然后從菜單中選擇目標偽類，將其啟用或停用

• 在 Elements 面板中選擇元素，然后在 Styles 窗格中點擊 :hov 按鈕，使用復選框啟用或停用當前選定元素的選擇器

快速向樣式規則添加背景色或顏色

Styles 窗格提供了一個用於向樣式規則快速添加 text-shadow、box-shadow、color 和 background-color 聲明的快捷方式

樣式規則的右下角有一個由三個點組成的圖標。您需要將鼠標懸停到樣式規則上才能看到這個圖標

將鼠標懸停到此圖標上可以調出添加 text-shadow、box-shadow、color 和 background-color 聲明的快捷方式。

使用 Color Picker 修改顏色

要打開 Color Picker，請在 Styles 窗格中查找一個定義顏色的 CSS 聲明（例如 color: blue）。 聲明值的左側有一個帶顏色的小正方形。 正方形的顏色與聲明值匹配。 點擊小正方形可以打開 Color Picker

您可以通過多種方式與 Color Picker 交互：

1. 取色器。 通過鼠標懸停到某種顏色上去獲取顏色值。
2. 當前顏色。 當前值的可視表示。
3. 當前值。 當前顏色的十六進制、RGBA 或 HSL 表示。
4. 調色板。 當前生成的幾組顏色。
5. 着色和陰影選擇器。
6. 色調選擇器。
7. 不透明度選擇器。
8. 顏色值選擇器。 點擊可以在 RGBA、HSL 和十六進制之間切換。
9. 調色板選擇器。 點擊可以選擇不同的模板。

編輯 DOM

Elements 面板中的 DOM 樹視圖可以顯示當前網頁的 DOM 結構。通過 DOM 更新實時修改頁面的內容和結構

隱藏 DOM

兩種方式：

• 右鍵選擇某個元素，然后選擇 Hide element
• 選中某個元素，然后使用快捷鍵 H

設置 DOM 斷點

設置 DOM 斷點以調試復雜的 JavaScript 應用。例如，如果您的 JavaScript 正在更改 DOM 元素的樣式，請將 DOM 斷點設置為在元素屬性修改時觸發。在發生以下一種 DOM 更改時觸發斷點：子樹更改、屬性更改、節點移除

子樹修改

設置子樹修改斷點：右鍵選擇某個元素，然后選擇 Break on --> subtree modifications

添加、移除或移動子元素時將觸發子樹修改斷點。例如，如果您在 main-content 元素上設置子樹修改，以下代碼將觸發斷點：

var element = document.getElementById('main-content');
//modify the element's subtree.
var mySpan = document.createElement('span');
element.appendChild( mySpan );

屬性修改

設置屬性修改斷點：右鍵選擇某個元素，然后選擇 Break on --> attribute modifications

動態更改元素的屬性 (class, id, name) 時將發生屬性修改：

var element = document.getElementById('main-content');
// class attribute of element has been modified.
element.className = 'active';

節點移除

設置節點移除斷點：右鍵選擇某個元素，然后選擇 Break on --> node removal

從 DOM 中移除有問題的節點時將觸發節點移除修改：

document.getElementById('main-content').remove();

查看元素事件偵聽器

在 Event Listeners 窗格中查看與 DOM 節點關聯的 JavaScript 事件偵聽器

啟用 Ancestors 復選框時查看祖先實體事件偵聽器，即除了當前選定節點的事件偵聽器外，還會顯示其祖先實體的事件偵聽器

啟用 Framework listeners 復選框時查看框架偵聽器，DevTools 會自動解析事件代碼的框架或內容庫封裝部分，然后告訴您實際將事件綁定到代碼中的位置

控制台面板（Console）

在開發期間，可以使用控制台面板記錄診斷信息，或者使用它作為 shell 在頁面上與 JavaScript 交互

消息堆疊

如果一條消息連續重復，而不是在新行上輸出每一個消息實例，控制台將“堆疊”消息並在左側外邊距顯示一個數字。此數字表示該消息已重復的次數

如果您傾向於為每一個日志使用一個獨特的行條目，請在 DevTools 設置中啟用 Show timestamps

由於每一條消息的時間戳均不同，因此，每一條消息都將顯示在各自的行上

選擇執行環境

以下屏幕截圖中以藍色突出顯示的下拉菜單稱為 Execution Context Selector

通常，您會看到此環境設置為 top（頁面的頂部框架）。

其他框架和擴展程序在其自身的環境中運行。要使用這些其他環境，您需要從下拉菜單中選中它們。 例如，如果您要查看 <iframe> 元素的日志輸出，並修改該環境中存在的某個變量，您需要從 Execution Context Selector 下拉菜單中選中該元素。

控制台默認設置為 top 環境，除非您通過檢查其他環境中的某個元素來訪問 DevTools。 例如，如果您檢查 <iframe> 中的一個 <p> 元素，那么，DevTools 將 Execution Context Selector 設置為該 <iframe> 的環境。

當您在 top 以外的環境中操作時，DevTools 將 Execution Context Selector 突出顯示為紅色，如下面的屏幕截圖中所示。 這是因為開發者很少需要在 top 以外的任意環境中操作。 輸入一個變量，期待返回一個值，只是為了查看該變量是否為 undefined（因為該變量是在不同環境中定義的），這會非常令人困惑

源代碼面板（Sources）

在源代碼面板中設置斷點來調試 JavaScript ，或者通過Workspaces（工作區）連接本地文件來使用開發者工具的實時編輯器

格式化混淆代碼

在某些情況下，我們需要對混淆的代碼做一定的調試，但這是我們看到的代碼是亂成一團，毫無格式可言：

那我們可以點擊下方的格式化按鈕對代碼進行格式化：

斷點調試

代碼行斷點

當我們知道需要調試的代碼的確切位置的時候，使用代碼行斷點

DevTools 設置代碼行斷點：

1. 點擊 Sources 選項卡。
2. 打開包含您想要調試的代碼行的文件。
3. 找到該代碼行。
4. 點擊左邊的行號，這樣一個藍色圖標就顯示在行號上，表明該代碼行設置好斷點了。

當然你也可以在代碼中使用 debugger 來設置代碼行斷點，效果和在 DevTools 中設置是一樣的：

console.log('a');
console.log('b');
debugger;
console.log('c');

條件代碼行斷點

當我們知道需要調試的代碼的確切位置且在滿足條件下才調試的時候，使用條件代碼行斷點

設置條件的代碼行斷點：

1. 點擊 Sources 選項卡。
2. 打開包含您想要調試的代碼行的文件。
3. 找到該代碼行。
4. 右鍵點擊左邊的行號。
5. 選擇添加條件斷點。代碼行下面會顯示一個對話框。
6. 在對話框中輸入你的條件。
7. 按Enter激活斷點。行號上出現橙色圖標。

DOM更改斷點

當您想要更改DOM節點或其子節點的代碼時，使用DOM更改斷點

設置DOM更改斷點：

1. 切換到 Elements 面板。
2. 找到您想設置斷點的元素並右鍵單擊該元素。
3. 將鼠標懸停在 Break on 上，然后選擇 subtree modifications，attribute modifications或node removal。

XHR斷點

當XHR的請求URL包含指定字符串時，如果要中斷，使用XHR斷點

設置XHR斷點：

1. 點擊 Sources 選項卡。
2. 展開 XHR Breakpoints 窗格。
3. 點擊添加斷點。
4. 輸入你想要打斷的字符串。當此字符串出現在XHR的請求URL中的任何位置時，DevTools會暫停。
5. 按Enter確認。

事件監聽器斷點

當想要暫停事件偵聽器代碼時，使用事件偵聽器斷點

設置事件監聽器斷點：

1. 點擊 Sources 選項卡。
2. 展開 “Event Listener Breakpoints” 窗格。DevTools顯示事件類別的列表，例如動畫。
3. 選中這些類別中的一個可以暫停該類別的任何事件，或者展開類別並檢查特定事件。

異常斷點

當您想暫停引發捕獲或未捕獲異常的代碼行時，使用異常斷點

設置異常斷點：

1. 點擊 Sources 選項卡。
2. 點擊暫停，啟用后變成藍色。
3. （可選）如果除了未捕獲的異常外，還想暫停捕獲的異常，請選中 “Pause on caught exceptions” 復選框。

功能斷點

調用 debug(functionName) 來給函數 functionName 進行斷點調試

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

未完待續...

參考資料

https://developers.google.com/web/tools/chrome-devtools/