Chrome開發者工具（上篇）
本文介紹的 Chrome 開發者工具基於 Chrome 65版本，如果你的 Chrome 開發者工具沒有下文提到的那些內容，請檢查下 Chrome 的版本
簡介
Chrome 開發者工具是一套內置於 Google Chrome 中的Web開發和除錯工具，可用來對網站進行迭代、除錯和分析
開啟 Chrome 開發者工具的方式有：
Chrome 開發者工具主要包含以下10個部分：
- 裝置模式（device toolbar）
- 元素面板（Elements）
- 控制檯面板（Console）
- 原始碼面板（Sources）
- 網路面板（Network）
- 效能面板（Performance）
- 記憶體面板（Memory）
- 應用面板（Application）
- 安全面板（Security）
- 主選單（Customize and control DevTools）
裝置模式（device toolbar）
使用 Chrome DevTools 的 Device Mode 打造移動裝置優先的完全自適應式網站
該模式不可替代真實裝置測試
切換 Device Mode 按鈕可以開啟或關閉 Device Mode
選擇裝置
通過該檢視控制元件，你可以設定下面兩種模式：
- 自適應。 使視口可以通過任意一側的大手柄隨意調整大小
- 特定裝置。 將視口鎖定為特定裝置確切的視口大小，並模擬特定裝置特性
媒體查詢
媒體查詢是自適應網頁設計的基本部分。要檢視媒體查詢檢查器，請在三圓點選單中點選 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 互動：
- 取色器。 通過滑鼠懸停到某種顏色上去獲取顏色值。
- 當前顏色。 當前值的可視表示。
- 當前值。 當前顏色的十六進位制、RGBA 或 HSL 表示。
- 調色盤。 當前生成的幾組顏色。
- 著色和陰影選擇器。
- 色調選擇器。
- 不透明度選擇器。
- 顏色值選擇器。 點選可以在 RGBA、HSL 和十六進位制之間切換。
- 調色盤選擇器。 點選可以選擇不同的模板。
編輯 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 設定程式碼行斷點：
- 點選 Sources 選項卡。
- 開啟包含您想要除錯的程式碼行的檔案。
- 找到該程式碼行。
- 點選左邊的行號，這樣一個藍色圖示就顯示在行號上，表明該程式碼行設定好斷點了。
當然你也可以在程式碼中使用 debugger 來設定程式碼行斷點，效果和在 DevTools 中設定是一樣的：
console.log('a');
console.log('b');
debugger;
console.log('c');條件程式碼行斷點
當我們知道需要除錯的程式碼的確切位置且在滿足條件下才除錯的時候，使用條件程式碼行斷點
設定條件的程式碼行斷點：
- 點選 Sources 選項卡。
- 開啟包含您想要除錯的程式碼行的檔案。
- 找到該程式碼行。
- 右鍵點選左邊的行號。
- 選擇新增條件斷點。程式碼行下面會顯示一個對話方塊。
- 在對話方塊中輸入你的條件。
- 按Enter啟用斷點。行號上出現橙色圖示。
DOM更改斷點
當您想要更改DOM節點或其子節點的程式碼時，使用DOM更改斷點
設定DOM更改斷點：
- 切換到 Elements 面板。
- 找到您想設定斷點的元素並右鍵單擊該元素。
- 將滑鼠懸停在 Break on 上，然後選擇 subtree modifications，attribute modifications或node removal。
XHR斷點
當XHR的請求URL包含指定字串時，如果要中斷，使用XHR斷點
設定XHR斷點：
- 點選 Sources 選項卡。
- 展開 XHR Breakpoints 窗格。
- 點選新增斷點。
- 輸入你想要打斷的字串。當此字串出現在XHR的請求URL中的任何位置時，DevTools會暫停。
- 按Enter確認。
事件監聽器斷點
當想要暫停事件偵聽器程式碼時，使用事件偵聽器斷點
設定事件監聽器斷點：
- 點選 Sources 選項卡。
- 展開 “Event Listener Breakpoints” 窗格。DevTools顯示事件類別的列表，例如動畫。
- 選中這些類別中的一個可以暫停該類別的任何事件，或者展開類別並檢查特定事件。
異常斷點
當您想暫停引發捕獲或未捕獲異常的程式碼行時，使用異常斷點
設定異常斷點：
- 點選 Sources 選項卡。
- 點選暫停
，啟用後變成藍色。
- （可選）如果除了未捕獲的異常外，還想暫停捕獲的異常，請選中 “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();