前端開發必備之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/