前言：因作LaGou網(wǎng)翻頁(yè)教程，頻繁訪問(wèn)，導(dǎo)致IP被封，所以先來(lái)篇我們?cè)撊绾巫グ?/p>
目標(biāo)：學(xué)會(huì)利用Chrome瀏覽器的開(kāi)發(fā)者工具進(jìn)行HTTP請(qǐng)求分析
一：什么是抓包
即抓取我們本地電腦與遠(yuǎn)端服務(wù)器通信時(shí)候所傳遞的數(shù)據(jù)包
二：Chrome瀏覽器講解
Chrome 開(kāi)發(fā)者工具是一套內(nèi)置于Google Chrome中的Web開(kāi)發(fā)和調(diào)試工具，可用來(lái)對(duì)網(wǎng)站進(jìn)行迭代、調(diào)試和分析
三：打開(kāi)Chrome開(kāi)發(fā)者工具
在Chrome界面按F12
or在頁(yè)面元素上右鍵點(diǎn)擊，選擇“檢查”
四：開(kāi)發(fā)者工具的結(jié)構(gòu)
Elements（元素面板）：使用“元素”面板可以通過(guò)自由操縱DOM和CSS來(lái)重演您網(wǎng)站的布局和設(shè)計(jì)。
Console（控制臺(tái)面板）：在開(kāi)發(fā)期間，可以使用控制臺(tái)面板記錄診斷信息，或者使用它作為 shell，在頁(yè)面上與JavaScript交互
Sources（源代碼面板）：在源代碼面板中設(shè)置斷點(diǎn)來(lái)調(diào)試 JavaScript ，或者通過(guò)Workspaces（工作區(qū)）連接本地文件來(lái)使用開(kāi)發(fā)者工具的實(shí)時(shí)編輯器
Network（網(wǎng)絡(luò)面板）：從發(fā)起網(wǎng)頁(yè)頁(yè)面請(qǐng)求Request后得到的各個(gè)請(qǐng)求資源信息（包括狀態(tài)、資源類型、大小、所用時(shí)間等），并可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化
Performance（性能面板）：使用時(shí)間軸面板，可以通過(guò)記錄和查看網(wǎng)站生命周期內(nèi)發(fā)生的各種事件來(lái)提高頁(yè)面運(yùn)行時(shí)的性能
Memory（內(nèi)存面板）：分析web應(yīng)用或者頁(yè)面的執(zhí)行時(shí)間以及內(nèi)存使用情況
Application（應(yīng)用面板）：記錄網(wǎng)站加載的所有資源信息，包括存儲(chǔ)數(shù)據(jù)（Local Storage、Session Storage、-IndexedDB、Web SQL、Cookies）、緩存數(shù)據(jù)、字體、圖片、腳本、樣式表等
Security（安全面板）：使用安全面板調(diào)試混合內(nèi)容問(wèn)題，證書問(wèn)題等等
Audits（審核面板）：對(duì)當(dāng)前網(wǎng)頁(yè)進(jìn)行網(wǎng)絡(luò)利用情況、網(wǎng)頁(yè)性能方面的診斷，并給出一些優(yōu)化建議。比如列出所有沒(méi)有用到的CSS文件等
五：重點(diǎn)講解Network
定義：Network 面板記錄頁(yè)面上每個(gè)網(wǎng)絡(luò)操作的相關(guān)信息，包括詳細(xì)的耗時(shí)數(shù)據(jù)、HTTP 請(qǐng)求與響應(yīng)標(biāo)頭和 Cookie
結(jié)構(gòu)：由五個(gè)窗格組成，如圖
1：Controls（控件）?
使用這些選項(xiàng)可以控制 Network(網(wǎng)絡(luò))面板的外觀和功能
2：Filters（過(guò)濾器）
使用這些選項(xiàng)可以控制在請(qǐng)求列表中顯示哪些資源
提示：按住Ctrl（Window / Linux），然后點(diǎn)擊過(guò)濾器可以同時(shí)選擇多個(gè)過(guò)濾器。
此外，篩選框可以實(shí)現(xiàn)很多定制化的篩選，比如字符串匹配，關(guān)鍵詞篩選等，其中關(guān)鍵詞篩選主要有如下幾種：?
domain：僅顯示來(lái)自指定域的資源。您可以使用通配符（）來(lái)包括多個(gè)域。例如，.com顯示以.com結(jié)尾的所有域名中的資源。 DevTools會(huì)在自動(dòng)完成下拉菜單中自動(dòng)填充它遇到的所有域。
has-response-header：顯示包含指定HTTP響應(yīng)頭信息的資源。 DevTools會(huì)在自動(dòng)完成下拉菜單中自動(dòng)填充它遇到的所有響應(yīng)頭。
is：通過(guò)is:running找出WebSocket請(qǐng)求。
larger-than(大于)：顯示大于指定大小的資源（以字節(jié)為單位）。設(shè)置值1000等效于設(shè)置值1k。
method(方法)：顯示通過(guò)指定的HTTP方法類型檢索的資源。DevTools使用它遇到的所有HTTP方法填充下拉列表。
mime-type（mime類型：顯示指定MIME類型的資源。 DevTools使用它遇到的所有MIME類型填充下拉列表。
mixed-content（混合內(nèi)容：顯示所有混合內(nèi)容資源（mixed-content:all）或僅顯示當(dāng)前顯示的內(nèi)容（mixed-content:displayed）。
Scheme（協(xié)議）：顯示通過(guò)不受保護(hù)的HTTP（scheme:http）或受保護(hù)的HTTPS（scheme:https）檢索的資源。
set-cookie-domain（cookie域）：顯示具有Set-Cookie頭,并且其Domain屬性與指定值匹配的資源。DevTools會(huì)在自動(dòng)完成下拉菜單中自動(dòng)填充它遇到的所有Cookie域。
set-cookie-name（cookie名）：顯示具有Set-Cookie頭,并且名稱與指定值匹配的資源。DevTools會(huì)在自動(dòng)完成下拉菜單中自動(dòng)填充它遇到的所有Cookie名。
set-cookie-value（cookie值）：顯示具有Set-Cookie頭,并且值與指定值匹配的資源。DevTools會(huì)在自動(dòng)完成下拉菜單中自動(dòng)填充它遇到的所有cookie值。
status-code（狀態(tài)碼）：僅顯示其HTTP狀態(tài)代碼與指定代碼匹配的資源。DevTools會(huì)在自動(dòng)完成下拉菜單中自動(dòng)填充它遇到的所有狀態(tài)碼。
3：Overview（概覽）
這個(gè)圖表顯示檢索資源的時(shí)間軸。如果您看到多個(gè)垂直堆疊的欄，這意味著這些資源被同時(shí)檢索。
4：Requests Table（請(qǐng)求列表）
此列表列出了檢索的每個(gè)資源。默認(rèn)情況下，此表按時(shí)間順序排序，也就是最早的資源在頂部。單擊資源名稱可以獲得更多信息。提示：右鍵單擊列表的任何標(biāo)題欄可以以添加或刪除信息列。
查看單個(gè)資源的詳細(xì)信息
點(diǎn)擊資源名稱（位于 Requests Table 的 Name 列下）可以查看與該資源有關(guān)的更多信息。?
可用標(biāo)簽會(huì)因您所選擇資源類型的不同而不同，但下面四個(gè)標(biāo)簽最常見(jiàn)：
Headers：與資源關(guān)聯(lián)的 HTTP 標(biāo)頭。
Preview：JSON、圖像和文本資源的預(yù)覽。
Response：HTTP 響應(yīng)數(shù)據(jù)（如果存在）。
Timing：資源請(qǐng)求生命周期的精細(xì)分解。
Headers（查看 HTTP 標(biāo)頭）?
點(diǎn)擊?Headers?可以顯示該資源的標(biāo)頭。?
Headers?標(biāo)簽可以顯示資源的請(qǐng)求網(wǎng)址、HTTP 方法以及響應(yīng)狀態(tài)代碼。 此外，該標(biāo)簽還會(huì)列出 HTTP 響應(yīng)和請(qǐng)求標(biāo)頭、它們的值以及任何查詢字符串參數(shù)
點(diǎn)擊每一部分旁邊的?view source?或?view parsed?鏈接，您能夠以源格式或者解析格式查看響應(yīng)標(biāo)頭、請(qǐng)求標(biāo)頭或者查詢字符串參數(shù)。
Preview（預(yù)覽資源）?
點(diǎn)擊Preview標(biāo)簽可以查看該資源的預(yù)覽。Preview標(biāo)簽可能顯示一些有用的信息，也可能不顯示，具體取決于您所選擇資源的類型。
查看 Cookie
點(diǎn)擊 Cookies 標(biāo)簽可以查看在資源的 HTTP 請(qǐng)求和響應(yīng)標(biāo)頭中傳輸?shù)?Cookie 表。 只有傳輸 Cookie 時(shí)，此標(biāo)簽才可用。
下面是 Cookie 表中每一列的說(shuō)明：
Name：Cookie 的名稱。
Value：Cookie 的值。
Domain：Cookie 所屬的域。
Path：Cookie 來(lái)源的網(wǎng)址路徑。
Expires / Max-Age：Cookie 的 expires 或 max-age 屬性的值。
Size：Cookie 的大?。ㄒ宰止?jié)為單位）。
HTTP：指示 Cookie 應(yīng)僅由瀏覽器在 HTTP 請(qǐng)求中設(shè)置，而無(wú)法通過(guò) JavaScript 訪問(wèn)。
Secure：如果存在此屬性，則指示 Cookie 應(yīng)僅通過(guò)安全連接傳輸。
復(fù)制、保存和清除網(wǎng)絡(luò)信息
右鍵單擊Requests Table（請(qǐng)求列表）以復(fù)制、保存或刪除網(wǎng)絡(luò)信息。一些選項(xiàng)是上下文相關(guān)的，所以如果想在單個(gè)資源上操作，需要右鍵單擊該資源行。下面的列表描述了每個(gè)選項(xiàng)
Copy Response（復(fù)制響應(yīng)）
將所選資源的HTTP響應(yīng)復(fù)制到系統(tǒng)剪貼板。
Copy as cURL（復(fù)制為cURL）
將所選資源的網(wǎng)絡(luò)請(qǐng)求作為cURL命令字符串復(fù)制到系統(tǒng)剪貼板。 請(qǐng)參閱將復(fù)制請(qǐng)求為cURL命令。
curl命令是一個(gè)利用URL規(guī)則在命令行下工作的文件傳輸工具。它支持文件的上傳和下載，所以是綜合傳輸工具，但按傳統(tǒng)，習(xí)慣稱curl為下載工具。作為一款強(qiáng)力工具，curl支持包括HTTP、HTTPS、ftp等眾多協(xié)議，還支持POST、cookies、認(rèn)證、從指定偏移處下載部分文件、用戶代理字符串、限速、文件大小、進(jìn)度條等特征。做網(wǎng)頁(yè)處理流程和數(shù)據(jù)檢索自動(dòng)化，curl可以祝一臂之力。l
Copy All as HAR（全部復(fù)制為HAR）
將所有資源復(fù)制到系統(tǒng)剪貼板作為HAR數(shù)據(jù)。 HAR文件包含描述網(wǎng)絡(luò)“瀑布”的JSON數(shù)據(jù)結(jié)構(gòu)。一些第三方工具可以使用HAR文件中的數(shù)據(jù)重建網(wǎng)絡(luò)瀑布。有關(guān)詳細(xì)信息，請(qǐng)參閱Web性能強(qiáng)大工具：HTTP歸檔（HAR）。
Save as HAR with Content（另存為帶內(nèi)容的HAR）
將所有網(wǎng)絡(luò)數(shù)據(jù)與每個(gè)頁(yè)面資源一起保存到HAR文件中。 二進(jìn)制資源（包括圖像）被編碼為Base64編碼文本。
Clear Browser Cache（清除瀏覽器緩存）
清除瀏覽器高速緩存。提示：您也可以從Network Conditions(網(wǎng)絡(luò)條件)抽屜式窗格中啟用或禁用瀏覽器緩存。
Clear Browser Cookies（清除瀏覽器Cookie）
清除瀏覽器的Cookie。
Open in Sources Panel（在源文件面板中打開(kāi)）
在Sources(源文件)面板中打開(kāi)選定的資源。
Open Link in New Tab（在新標(biāo)簽頁(yè)中打開(kāi)鏈接）
在新標(biāo)簽頁(yè)中打開(kāi)所選資源。您還可以在Requests Table(請(qǐng)求列表)中雙擊資源名稱。
Copy Link Address（復(fù)制鏈接地址）
將資源URL復(fù)制到系統(tǒng)剪貼板。
Save（保存）
保存所選的文本資源。僅顯示在文本資源上。
Replay XHR（重新發(fā)送XHR）
重新發(fā)送所選的XMLHTTPRequest。僅顯示在XHR資源上。
查看資源發(fā)起者和依賴關(guān)系
按住Shift并移動(dòng)鼠標(biāo)到資源上可查看它的發(fā)起者和依賴關(guān)系。這部分是你鼠標(biāo)懸停的資源的target(目標(biāo))引用。
從target(目標(biāo))往上查找，第一個(gè)顏色編碼為綠色的資源是target(目標(biāo))的發(fā)起者。如果存在第二個(gè)顏色編碼為綠色資源，那么這個(gè)是發(fā)起者的發(fā)起者。從target(目標(biāo))向下查找，任何顏色編碼為紅色的資源都是target的依賴。
大家可以看下之前案例的抓包\
異步加載的抓包一般都在XHR，JS中
現(xiàn)在學(xué)習(xí)Tor代理服務(wù)器，來(lái)解決IP被封問(wèn)題，歡迎大家一起來(lái)學(xué)習(xí)
