Chrome瀏覽器相對於其他的瀏覽器而言，DevTools（開發者工具）非常強大。這節課將為大家介紹怎么利用Chrome瀏覽器的開發者工具進行HTTP請求分析
Chrome瀏覽器講解
Chrome 開發者工具是一套內置於Google Chrome中的Web開發和調試工具，可用來對網站進行迭代、調試和分析
打開Chrome開發工具
- 在Chrome菜單中選擇更多工具 >開發者工具
- 在頁面元素上右鍵點擊，選擇“檢查”
- 或者使用快捷鍵：
Ctrl+Shift+I (Windows)或Cmd+Opt+I (Mac)
開發者工具的功能結構
-
Elements（元素面板）：使用“元素”面板可以通過自由操縱DOM和CSS來重演您網站的布局和設計。 - Console（控制台面板）：在開發期間，可以使用控制台面板記錄診斷信息，或者使用它作為 shell，在頁面上與JavaScript交互
- Sources（源代碼面板）：在源代碼面板中設置斷點來調試 JavaScript ，或者通過Workspaces（工作區）連接本地文件來使用開發者工具的實時編輯器
- Network（網絡面板）：從發起網頁頁面請求Request后得到的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），並可以根據這個進行網絡性能優化
-
Performance（性能面板）：使用時間軸面板，可以通過記錄和查看網站生命周期內發生的各種事件來提高頁面運行時的性能 -
Memory（內存面板）：分析web應用或者頁面的執行時間以及內存使用情況 -
Application（應用面板）：記錄網站加載的所有資源信息，包括存儲數據（Local Storage、Session Storage、-IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等 -
Security（安全面板）：使用安全面板調試混合內容問題，證書問題等等 -
Audits（審核面板）：對當前網頁進行網絡利用情況、網頁性能方面的診斷，並給出一些優化建議。比如列出所有沒有用到的CSS文件等
Network（網絡）面板：
Network 面板記錄頁面上每個網絡操作的相關信息，包括詳細的耗時數據、HTTP 請求與響應標頭和 Cookie
Network面板由五個窗格組成：
Controls：使用這些選項可以控制 Network 面板的外觀和功能
Filters： 使用這些選項可以控制在 Requests Table 中顯示哪些資源。提示：按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 並點擊過濾器可以同時選擇多個過濾器
Overview： 此圖表顯示了資源檢索時間的時間線。如果您看到多條豎線堆疊在一起，則說明這些資源被同時檢索
Requests Table： 此表格列出了檢索的每一個資源。 默認情況下，此表格按時間順序排序，最早的資源在頂部。點擊資源的名稱可以顯示更多信息。 提示：右鍵點擊 Timeline 以外的任何一個表格標題可以添加或移除信息列
Summary： 此窗格可以一目了然地告訴您請求總數、傳輸的數據量和加載時間
-
Controls（控件）
使用這些選項可以控制 Network(網絡)面板的外觀和功能。
-
Filters（過濾器）
使用這些選項可以控制在請求列表中顯示哪些資源。
image.png提示：按住Cmd（Mac）或Ctrl（Window / Linux），然后點擊過濾器可以同時選擇多個過濾器。
此外，篩選框可以實現很多定制化的篩選，比如字符串匹配，關鍵詞篩選等，其中關鍵詞篩選主要有如下幾種：-
domain：僅顯示來自指定域的資源。您可以使用通配符（）來包括多個域。例如，.com顯示以.com結尾的所有域名中的資源。 DevTools會在自動完成下拉菜單中自動填充它遇到的所有域。 -
has-response-header：顯示包含指定HTTP響應頭信息的資源。 DevTools會在自動完成下拉菜單中自動填充它遇到的所有響應頭。 -
is：通過is:running找出WebSocket請求。 -
larger-than(大於)：顯示大於指定大小的資源（以字節為單位）。設置值1000等效於設置值1k。 -
method(方法)：顯示通過指定的HTTP方法類型檢索的資源。DevTools使用它遇到的所有HTTP方法填充下拉列表。 -
mime-type（mime類型：顯示指定MIME類型的資源。 DevTools使用它遇到的所有MIME類型填充下拉列表。 -
mixed-content（混合內容：顯示所有混合內容資源（mixed-content:all）或僅顯示當前顯示的內容（mixed-content:displayed）。 -
Scheme（協議）：顯示通過不受保護的HTTP（scheme:http）或受保護的HTTPS（scheme:https）檢索的資源。 -
set-cookie-domain（cookie域）：顯示具有Set-Cookie頭,並且其Domain屬性與指定值匹配的資源。DevTools會在自動完成下拉菜單中自動填充它遇到的所有Cookie域。 -
set-cookie-name（cookie名）：顯示具有Set-Cookie頭,並且名稱與指定值匹配的資源。DevTools會在自動完成下拉菜單中自動填充它遇到的所有Cookie名。 -
set-cookie-value（cookie值）：顯示具有Set-Cookie頭,並且值與指定值匹配的資源。DevTools會在自動完成下拉菜單中自動填充它遇到的所有cookie值。 -
status-code（狀態碼）：僅顯示其HTTP狀態代碼與指定代碼匹配的資源。DevTools會在自動完成下拉菜單中自動填充它遇到的所有狀態碼。
-
Overview（概覽）
這個圖表顯示檢索資源的時間軸。如果您看到多個垂直堆疊的欄，這意味着這些資源被同時檢索。-
Requests Table（請求列表）
此列表列出了檢索的每個資源。默認情況下，此表按時間順序排序，也就是最早的資源在頂部。單擊資源名稱可以獲得更多信息。
提示：右鍵單擊列表的任何標題欄可以以添加或刪除信息列。查看單個資源的詳細信息點擊資源名稱（位於 Requests Table 的 Name 列下）可以查看與該資源有關的更多信息。
可用標簽會因您所選擇資源類型的不同而不同，但下面四個標簽最常見：Headers（查看 HTTP 標頭）
點擊Headers可以顯示該資源的標頭。
Headers標簽可以顯示資源的請求網址、HTTP 方法以及響應狀態代碼。 此外，該標簽還會列出 HTTP 響應和請求標頭、它們的值以及任何查詢字符串參數
image.png點擊每一部分旁邊的
view source或view parsed鏈接，您能夠以源格式或者解析格式查看響應標頭、請求標頭或者查詢字符串參數。
image.png
Preview（預覽資源）
點擊 Preview 標簽可以查看該資源的預覽。Preview 標簽可能顯示一些有用的信息，也可能不顯示，具體取決於您所選擇資源的類型。
查看 Cookie
點擊 Cookies 標簽可以查看在資源的 HTTP 請求和響應標頭中傳輸的 Cookie 表。 只有傳輸 Cookie 時，此標簽才可用。
下面是 Cookie 表中每一列的說明：
Name：Cookie 的名稱。
Value：Cookie 的值。
Domain：Cookie 所屬的域。
Path：Cookie 來源的網址路徑。
Expires / Max-Age：Cookie 的 expires 或 max-age 屬性的值。
Size：Cookie 的大小（以字節為單位）。
HTTP：指示 Cookie 應僅由瀏覽器在 HTTP 請求中設置，而無法通過 JavaScript 訪問。
- Secure：如果存在此屬性，則指示 Cookie 應僅通過安全連接傳輸。
image.png復制、保存和清除網絡信息右鍵單擊
Requests Table（請求列表）以復制、保存或刪除網絡信息。一些選項是上下文相關的，所以如果想在單個資源上操作，需要右鍵單擊該資源行。下面的列表描述了每個選項 Copy Response（復制響應）
將所選資源的HTTP響應復制到系統剪貼板。**
Copy as cURL（復制為cURL）**
將所選資源的網絡請求作為cURL命令字符串復制到系統剪貼板。 請參閱將復制請求為cURL命令。
curl命令是一個利用URL規則在命令行下工作的文件傳輸工具。它支持文件的上傳和下載，所以是綜合傳輸工具，但按傳統，習慣稱curl為下載工具。作為一款強力工具，curl支持包括HTTP、HTTPS、ftp等眾多協議，還支持POST、cookies、認證、從指定偏移處下載部分文件、用戶代理字符串、限速、文件大小、進度條等特征。做網頁處理流程和數據檢索自動化，curl可以祝一臂之力。lCopy All as HAR（全部復制為HAR）
將所有資源復制到系統剪貼板作為HAR數據。 HAR文件包含描述網絡“瀑布”的JSON數據結構。一些第三方工具可以使用HAR文件中的數據重建網絡瀑布。有關詳細信息，請參閱Web性能強大工具：HTTP歸檔（HAR）。Save as HAR with Content（另存為帶內容的HAR）
將所有網絡數據與每個頁面資源一起保存到HAR文件中。 二進制資源（包括圖像）被編碼為Base64編碼文本。Clear Browser Cache（清除瀏覽器緩存）
清除瀏覽器高速緩存。提示：您也可以從Network Conditions(網絡條件)抽屜式窗格中啟用或禁用瀏覽器緩存。Clear Browser Cookies（清除瀏覽器Cookie）
清除瀏覽器的Cookie。Open in Sources Panel（在源文件面板中打開）
在Sources(源文件)面板中打開選定的資源。Open Link in New Tab（在新標簽頁中打開鏈接）
在新標簽頁中打開所選資源。您還可以在Requests Table(請求列表)中雙擊資源名稱。Copy Link Address（復制鏈接地址）
將資源URL復制到系統剪貼板。Save（保存）
保存所選的文本資源。僅顯示在文本資源上。-
Replay XHR（重新發送XHR）
重新發送所選的XMLHTTPRequest。僅顯示在XHR資源上。查看資源發起者和依賴關系按住
Shift並移動鼠標到資源上可查看它的發起者和依賴關系。這部分是你鼠標懸停的資源的target(目標)引用。
從target(目標)往上查找，第一個顏色編碼為綠色的資源是target(目標)的發起者。如果存在第二個顏色編碼為綠色資源，那么這個是發起者的發起者。從target(目標)向下查找，任何顏色編碼為紅色的資源都是target的依賴。
補充資料：
Sources面板：
在源代碼面板中設置斷點來調試 JavaScript ，或者通過Workspaces（工作區）連接本地文件來使用開發者工具的實時編輯器。
在Sources面板中，連js都可以直接修改。主要是在設置斷點(breakpoint)進行單步調試時用的;
- ctr+shift+i或者F12打開開發者工具；
- 打開sources面板;直接給某行js代碼設置斷點。
- 刷新頁面后，程序就會停在斷點設置的那一行上。
Console（控制台）面板：
在開發期間，可以使用控制台面板記錄診斷信息，或者使用它作為 shell在頁面上與JavaScript交互。下面就是一些方法：
1.console.log
釋義：向控制台輸出普通信息
如果參數只是字符串：
console.log(“在控制台會輸出普通信息”);
如果有兩個參數,第一個參數是加了%c(注意小寫)的字符串,那么在控制台輸出時就會按照第二個參數給出的樣式輸出(下面的info,error,warn都可以使用%c格式輸出文字)
console.log(“%c這里會輸出紅色,20字號的文字”,”font-size:20px;color:red”);
2.console.info
釋義：向控制台輸出提示信息
console.info(“這是一條提示信息”);
3.console.error
釋義：向控制台輸出錯誤信息
console.error(“這是一條錯誤信息”);
4.console.warn
釋義：向控制台輸出警示信息
console.warn(“這是一條警息”);
5.console.group,console.groupEnd
console.group：開始一組輸出信息,可以嵌套,形成子信息,要結束當前組的信息輸出,要調用console.groupEnd
console.groupEnd：結束一組輸出信息
console.log(“%ckitchen api”,”font-size:18px;color:red”);
console.group(“vueComp方法”);
console.log(“該方法是生成一個可裝配的組件”);
console.group(“參數(Object)”);
console.log(“path:載入組件的路徑”);
console.log(“cache:是否開啟緩存”)
console.groupEnd();
console.groupEnd();
6.console.table
釋義：以表格形式將數據輸出
var data = [
{“name”:”尼古拉斯.趙四”,”age”:32},
{“name”:”岳雲鵬”,”age”:”32”}
];
console.table(data);
7.console.assert
釋義：斷言
var isDebug = false;
console.assert(isDebug,”如果前一個參數是false,控制台將輸出這段話”)
如果第一個參數不是布爾型,會自動轉成布爾型(0,false,"",null,undefined,NaN轉為false,其他均為true),不過建議直接寫false或者true
8.console.count
釋義：統計某個代碼片段執行了多少次
function runCount () {
//…代碼邏輯
console.count(“runCount執行次數:”)}
runCount();
runCount();
runCount();
runCount();
9.console.dir
釋義：將傳入對象的屬性,包括子對象的屬性,以列表形式輸出:
var obj = { name : “li4065”, sex : “man”, age : 29}
console.dir(obj);
console.dir(document.body); //以列表形式,把body的相關屬性展示出
PS.另外還有個console.dirxml方法,是會把相關節點中的包含的html/xml輸出,感覺沒啥用。不如直接在控制台輸入某個節點,會直接把該節點html/xml輸出。
10.console.time,console.timeEnd
console.time：生成一個記時器,並開始記時
console.timeEnd：結束某個指定標示的記時兩者配套使用,會把指定計時器運行時間計算出來
console.time(“run”); //生成一個名為run的定時器
for(var i=0;i<1000;i++) { console.log(“ces”)};
console.timeEnd(“run”); //結束名為run的定時器在chrome瀏覽器下
會輸出:run: 96.274ms
11.console.profile,console.profileEnd
console.profile：標記一個性能記錄點,並開始進行性能記錄
console.profileEnd：結束某個性能記錄可以在瀏覽器的profile的標簽看到相關性能記錄情況(記錄名,就是profile中的名稱)
function sayHi() { for(var i=0;i<1000;i++){ console.log(“hi”) }}
console.profile(“記錄sayHi的性能”);
sayHi();
console.profileEnd(“記錄sayHi的性能”);
記錄性能除了可以用這種手寫方式,也可以通過在profile標簽下,進行操作來記錄
12.console.trace
釋義：追逐函數的調用過程(堆棧跟蹤相關的調試)
function testTrace () {
var a = 12;
submit(a);
}
function submit (a) {
var b = 23;
add(a,b);
}
function add (a,b) {
console.log(a + b);
console.trace(“追蹤add相關的調用函數”); //如果這里不傳值,控制台會把console.trace()當作記錄的堆棧名}
13.在chrome控制台下,除了以上的相關方法,還有如下兩個比較好用的方法：keys,values
keys：返回傳入對象所有屬性名組成的數據.
values：返回所有屬性值組成的數組.
var info={name:’li4065’,sex:’man’,age:’29’};
keys(info); //把info存起來
values(info); //獲取info的相關數據
14.monitor,unmonitor
monitor：接收某個函數作為參數,該函數只要一執行,控制台就會輸出相關信息
unmonitor：移除對某個函數的監聽
function sayHi () {
console.log(“Hi”);
}
monitor(sayHi);
sayHi();
unmonitor(sayHi);
sayHi();
</div>