前端開發工具DevTools的詳細知識點總結（一）

打開DevTools

devtools,即Chrome 開發者工具，Chrome 開發者工具是一套內置於Google Chrome中的Web開發和調試工具，可用來對網站進行迭代、調試和分析。
打開devtools的三種方式：

1. 在Chrome菜單中選擇 更多工具 再選擇並點擊開發者工具（右圖即是Chrome菜單符號，位於屏幕的右上角）
2. 在頁面元素上右鍵點擊，選擇 “檢查”（這個操作會直接跳轉到指定元素的元素面板）
3. 使用 快捷鍵 Ctrl+Shift+I 或 F12

打開devtools後，如果是進入元素面板，那麼它的大體樣式應該就是這個樣子，並且我們還能發現，除了Elements面板外還有Console，Sources，Network，performance等一系列其它板塊的面板。

下圖是所有類型的devtools面板公有的第一行：

除去中間部分表示各種類型的devtools面板，其最左邊與最右邊分別有兩個按鈕（按從左往右的順序進行敘述）。

第一個按鈕的功能就是查看頁面內某個具體元素的元素面板，等價於選擇此元素直接用第二種方式打開devtools；第二個按鈕表示切換頁面的顯示形式（手機與電腦）；第三個按鈕表示打開devtools的菜單選項；第四個按鈕表示關閉devtools。
打開devtools的菜單選項：

這裏是dectools裏面一些很常用的功能，首先Dockside可以控制devtools位於屏幕的打開方位，Show console drawer打開抽屜形式的控制檯面板，Run command打開devtools裏的commend menu，Setting就是設置devtools裏面的很多東西等等。更多的功能以及其作用大家還是自己親自玩玩才更加清楚。

元素面板

打開元素面板的方式直接打開devtools即可，如果默認不是Elements面板，直接點擊Elements面板進行跳轉即可，其實一般情況下用第二種檢查元素的方式打開此面板最爲高效。
元素面板的操作簡單來看也就三種操作：選擇一個元素，查看CSS以及改變CSS

此面板可粗略分成左右兩個子面板。左邊面板結構比較簡單由上下兩部分組成，上邊面板即此頁面的html代碼，可以查看也能修改，修改後能生效但是刷新頁面後又會恢復原樣；下邊面板是顯示當前元素的一個層級結構，點擊後上邊面板的選擇區域可進行對於的跳轉，主要是查看的功能。
在右邊面板中又有許多子面板，styles，Computed，Event Listeners等等。

Style面板

第一行：

這一行主要有四個功能區，從左往右分別是過濾搜索，改變元素狀態，給元素新增類選擇器以及創建一個新的樣式規則。
過濾搜索就是按照一些特定的css樣式屬性進行過濾顯示。

改變元素狀態，點擊後會有五種可選狀態。

給元素新增類選擇器即如下圖所示：

創建一個新的樣式規則，這裏可以允許我們給元素自定義增添許多樣式。

主體部分：

這裏面顯示的是一些已被定義的css樣式，相比而言Computed面板顯示的是一些實際應用的css樣式。
element.style，在這裏你可以給當前元素新添一些css樣式，你也可以直接在下面的具體區域去修改或者新添css樣式，橫線劃掉的樣式代表未生效的樣式。
鼠標hover到某一個樣式區域欄，此區域的右下角會顯示一個當前區域生效的菜單選項，此菜單選項就是爲了更高效的輔助開發，hover此菜單選項，顯示如下：

從左往右功能依次是，添加text-shadow，添加box-shadow，添加color，添加background-color，最後一個加號與第一行的加號功能一致。
最下方：
顯示此元素的盒子模型（可查看與修改）

Computed面板

此面板顯示實際應用的css樣式，所以所有樣式都只能查看，不能修改。此面板結構很簡單，只有上下兩部分：上半部分顯示實際應用的元素盒子模型；下半部分顯示一些具體的實際應用的css樣式。至於中間的一個過濾搜索框與一個顯示內容button的功能可參考Styles面板，這裏就不再敘述。

devtools取色器

打開devtools的取色器

點擊含有顏色的圖標即可：

此取色器可大致有9個功能板塊：

1. 顏色色調（細色調）
2. 滴管，可直接吸取網頁的指定顏色（默認是已啓用，使用最爲方便）
3. 點擊後複製顏色值到剪切板
4. 顏色值
5. 調色板
6. 顏色色調（粗色調）
7. 不透明度
8. 顏色顯示值切換器（在當前顏色的RGBA，HSLA和十六進制表示之間切換）
9. 調色板切換器

控制檯面板

兩種類型的控制檯面板的打開方式：直接在面板打開和在摺疊抽屜中打開。
摺疊抽屜，是devtools隱藏的一個命令菜單，這裏可以調用很多devtools裏的其它功能模塊，兩種打開方式：一種是前面已敘述的點擊devtools設置+run command，一種是快捷鍵Command+Shift+P。

直接在面板打開的兩種方式：通過devtools跳轉，使用快捷鍵Control+Shift+J （無需提前打開devtools）。

通過摺疊抽屜打開的兩種方式：打開命令菜單並運行Show Console，打開設置並運行Show Console command或者直接使用快捷鍵Esc。

此兩種模式的控制檯不能同時顯示，所以還有另一種顯示：

但是這兩種形式的控制檯面板功能是一模一樣的。

基本功能介紹

控制檯面板的功能主要有三類：顯示信息，過濾信息和運行JavaScript代碼。
還是先看第一行功能區：

從左往右，依次有七個功能區。
首先，第一個按鈕是個顯示/隱藏側邊欄的按鈕，其功能是進行控制檯面板的顯示信息過濾。

顯示側邊欄時其右邊的Default levels下拉菜單會被禁止使用，因爲它的作用也是過濾信息並且側邊欄的過濾功能包含它。這是Default levels下拉菜單欄：

共有四種選項，按照嚴重級別排序分別爲：Verbose（詳細）,Info（信息），Warnings（警告）,Error（錯誤）。
在側邊欄的信息過濾功能中，除了上述四種過濾方式外還可以根據具體的messages進行過濾。
這一行中還有一個具有過濾功能的功能區——過濾框。
過濾框主要能按照以下三種類型的輸入進行信息過濾：

1. URL
2. 上下文
3. 正則表達式

第二個按鈕的功能是清除控制檯信息，除此之外還有三種清除控制檯信息的方式：

1. 右鍵單擊消息，然後選擇Clear Console
2. 在控制檯中鍵入clear()，然後運行
3. 快捷鍵Control+L
   
   接下來，top下拉菜單欄的功能是改變不同的JavaScript目錄。
   第四個眼睛標誌的按鈕是用於創建一個Live表達式，此表達式的值可實時更新。
   
   最後一個settings按鈕具備顯示信息的控制功能，其裏面有八個選擇項：
   
   此功能區域的設置也可以在devtools設置裏面的Preferences裏面進行設置：
   
   這八個選項的具體功能我在這就不具體敘述，大家可以自己親自動手玩玩便知。

控制檯應用

介紹完控制檯面板的一些基本功能區，接下來介紹控制檯具體怎麼用。
首先，此控制檯可以直接運行用戶自定義編寫的JavaScript代碼，包括用JavaScript代碼來修改當前頁面。編寫代碼的語法我這裏就不做介紹，可自行參看JavaScript語法。
注意：在控制檯中Enter鍵代表運行此單元代碼塊，而換行行爲的快捷鍵爲Shift+Enter。

此控制檯還擁有許多自己的API，都是console.xxx()的形式，如console.log()，console.count()，console.error()等等，這裏我也不進行詳細介紹，大家有興趣可以自己去玩玩。
除此之外，控制檯中還有另外一類很實用的API：
$_： 返回最近計算的表達式的值。

$0 - $4： $0返回最近選擇的元素或JavaScript對象，$1返回第二個最近選擇的元素，依此類推。

$(selector)： 使用指定的CSS選擇器返回對第一個DOM元素的引用。
（此函數等價於document.querySelector() ）

$$(selector)： 返回與給定CSS選擇器匹配的元素數組。
（此函數等價於document.querySelectorAll()）

還有 $x(path)，copy(object)，getEventListeners(object)，dir(object) 等一些列API，這裏我也不再過多敘述。

網絡面板

打開網絡面板的方式是先打開devtools然後再跳轉到Network。

網絡面板的功能主要有五種：記錄網絡請求，改變加載行爲，過濾請求，請求排序以及分析請求。

功能區介紹

第一行的功能區：

第一個紅色按鈕表示停止記錄網絡請求，快捷鍵 Control+E。
第二個按鈕表示清除請求表中的所有請求。
第三個按鈕是開啓過濾功能，點擊後會新出現一行過濾功能選項。

最左邊的那個過濾框是按屬性（例如請求的域或大小）過濾請求，然後旁邊的單選框表示是否隱藏data URLs，後面那些選項是按照請求類型進行過濾，最後還有一種可以按照時間進行過濾（稍後再敘述）。
注意：在類型過濾時除All選項外，按住Ctrl可以進行多選過濾。
第四個搜索按鈕可以當在HTTP標頭和所有資源的響應中搜索某個字符串或正則表達式。

Preserve log可以保存保存跨頁面加載的請求，Disable cache 可以禁用緩存。
Online下拉菜單欄可以模擬慢速網絡連接，總共有四種可選狀態。

倒數第三按鈕倒數第二按鈕分別是導入HAR文件和導出HAR文件。
最後一個Network Settings按鈕裏面雖然只有四個選項，但是都很強大。

Use large request rows： 可以使得網絡請求表中有更多空白。

Group by frame： 將請求按照框架進行分組顯示。

Show overview： 展現網絡請求的細節。

在這裏就可以通過時間進行請求過濾。

Capture screenshots： 捕捉屏幕截圖可以分析用戶在等待頁面加載時所看到的內容。

分析請求

默認情況下，請求表顯示以下列：

• Name，資源的文件名或標識符。
• Status，HTTP狀態碼。
• Type，所請求資源的類型。
• Initiator，發送請求的對象。
• Size，響應標頭和響應主體的組合大小，由服務器提供。
• Time，從請求開始到響應中最後一個字節接收的總持續時間。
• Waterfall，每個請求活動的可視化細節。

注意：

1. 鼠標hover到Name列可看到完整的URL。
2. 所有列都是支持resize
3. 請求表的列元素顯示是動態的，右鍵可選則自己想要顯示的列
4. 允許自定義列元素
   

自定義列元素：鼠標右鍵列頭，hover到Response Headers，點擊Manage Header Columns，點擊Add custom header…

查看響應體：點擊Name列裏面的具體行即可

此時又會出現一個新的面板，這裏有五個模塊，包括HTTP響應頭，響應體預覽，響應體等等。這裏我也不具體敘述，大家可以自己去查看。
在此版塊的最下面還有一個請求信息的彙總：

結語

到此，第一期也是最初版的devtools知識筆記告一段落，由於我自己也是devtools的初學者，所以知識深度只能至此且文章內容也難免會有錯誤之處，大家有看到的歡迎評論區指出。隨着devtools的繼續學習和使用，我也會持續更新此文章內容，希望此文章能對大家有所幫助。
最後，我給出我學習devtools所參考的官方教程鏈接：devtools使用教程