學(xué)號(hào)：17021211195
轉(zhuǎn)載自：https://mp.weixin.qq.com/s/M-DUXKW7snmky4ui2IEzOg
嵌牛導(dǎo)讀：網(wǎng)上爬蟲(chóng)的教程實(shí)在太多了，去知乎上搜一下，估計(jì)能找到不下一百篇。大家樂(lè)此不疲地從互聯(lián)網(wǎng)上抓取著一個(gè)又一個(gè)網(wǎng)站。但只要對(duì)方網(wǎng)站一更新，很可能文章里的方法就不再有效了。
每個(gè)網(wǎng)站抓取的代碼各不相同，不過(guò)背后的原理是相通的。對(duì)于絕大部分網(wǎng)站來(lái)說(shuō)，抓取的套路就那么一些。今天這篇文章不談任何具體網(wǎng)站的抓取，只來(lái)說(shuō)一個(gè)共性的東西：
如何通過(guò)?Chrome 開(kāi)發(fā)者工具尋找一個(gè)網(wǎng)站上特定數(shù)據(jù)的抓取方式。
我這里演示的是 Mac 上的英文版 Chrome，Windows 中文版的使用方法是一樣的。
嵌牛鼻子：網(wǎng)站爬蟲(chóng)
嵌牛提問(wèn)：爬蟲(chóng)是什么？
> 查看網(wǎng)頁(yè)源代碼
在網(wǎng)頁(yè)上右擊鼠標(biāo)，選擇“查看網(wǎng)頁(yè)源代碼”（View Page Source），就會(huì)在新標(biāo)簽頁(yè)中顯示這個(gè) URL 對(duì)應(yīng)的 HTML 代碼文本。
此功能并不算是“開(kāi)發(fā)者工具”一部分，但也很常用。這個(gè)內(nèi)容和你直接通過(guò)代碼向此 URL 發(fā)送 GET 請(qǐng)求得到的結(jié)果是一樣的（不考慮權(quán)限問(wèn)題）。如果在這個(gè)源代碼頁(yè)面上可以搜索到你要內(nèi)容，則可以按照其規(guī)則，通過(guò)正則、bs4、xpath?等方式對(duì)文本中的數(shù)據(jù)進(jìn)行提取。
不過(guò)，對(duì)于很多異步加載數(shù)據(jù)的網(wǎng)站，從這個(gè)頁(yè)面上并不能搜到你要的東西?；蛘咭?yàn)闄?quán)限、驗(yàn)證等限制，代碼中獲取到的結(jié)果和頁(yè)面顯示不一致。這些情況我們就需要更強(qiáng)大的開(kāi)發(fā)者工具來(lái)幫忙了。
> Elements
在網(wǎng)頁(yè)上右擊鼠標(biāo)，選擇“審查元素”（Inspect），可進(jìn)入 Chrome 開(kāi)發(fā)者工具的元素選擇器。在工具中是?Elements?標(biāo)簽頁(yè)。
Elements 有幾個(gè)功能：
選擇元素：通過(guò)鼠標(biāo)去選擇頁(yè)面上某個(gè)元素，并定位其在代碼中的位置。
模擬器：模擬不同設(shè)備的顯示效果，且可以模擬帶寬。
代碼區(qū)：顯示頁(yè)面代碼，以及選中元素對(duì)應(yīng)的路徑
樣式區(qū)：顯示選中元素所受的 CSS 樣式影響
從 Elements 工具里定位數(shù)據(jù)比我們前面直接在源代碼中搜索要方便，因?yàn)槟憧梢郧宄吹剿幍脑亟Y(jié)構(gòu)。但這邊特別提醒的是：
Elements 里看到的代碼不等于請(qǐng)求網(wǎng)址拿到的返回值。
它是網(wǎng)頁(yè)經(jīng)過(guò)瀏覽器渲染后最終呈現(xiàn)出的效果，包含了異步請(qǐng)求數(shù)據(jù)，以及瀏覽器自身對(duì)于代碼的優(yōu)化改動(dòng)。所以，你并不能完全按照 Elements 里顯示的結(jié)構(gòu)來(lái)獲取元素，那樣的話很可能得不到正確的結(jié)果。
> Network
在開(kāi)發(fā)者工具里選擇Network?標(biāo)簽頁(yè)就進(jìn)入了網(wǎng)絡(luò)監(jiān)控功能，也就是常說(shuō)的“抓包”。
這是爬蟲(chóng)所用到的最重要功能。它主要解決兩個(gè)問(wèn)題：
抓什么
怎么抓
抓什么，是指對(duì)于那些通過(guò)異步請(qǐng)求獲取到的數(shù)據(jù)，如何找到其來(lái)源。
打開(kāi) Network 頁(yè)面，開(kāi)啟記錄，然后刷新頁(yè)面，就可以看到發(fā)出的所有請(qǐng)求，包括數(shù)據(jù)、JS、CSS、圖片、文檔等等都會(huì)顯示其中。從請(qǐng)求列表中可以尋找你的目標(biāo)。
一個(gè)個(gè)去找會(huì)很痛苦。分享幾個(gè)小技巧：
點(diǎn)擊“搜索”功能，直接對(duì)內(nèi)容進(jìn)行查找。
選中?Preseve log，這樣頁(yè)面刷新和跳轉(zhuǎn)之后，列表不會(huì)清空。
Filter 欄可以按類型和關(guān)鍵字篩選請(qǐng)求。
找到包含數(shù)據(jù)的請(qǐng)求之后，接下來(lái)就是用程序獲取數(shù)據(jù)。這時(shí)就是第二個(gè)問(wèn)題：怎么抓。
并不是所有 URL 都能直接通過(guò) GET 獲?。ㄏ喈?dāng)于在瀏覽器里打開(kāi)地址），通常還要考慮這幾樣?xùn)|西：
請(qǐng)求方法，是 GET 還是 POST。
請(qǐng)求附帶的參數(shù)數(shù)據(jù)。GET 和 POST 傳遞參數(shù)的方法不一樣。
Headers 信息。常用的包括 user-agent、host、referer、cookie 等。其中?cookie?是用來(lái)識(shí)別請(qǐng)求者身份的關(guān)鍵信息，對(duì)于需要登錄的網(wǎng)站，這個(gè)值少不了。而另外幾項(xiàng)，也經(jīng)常會(huì)被網(wǎng)站用來(lái)識(shí)別請(qǐng)求的合法性。同樣的請(qǐng)求，瀏覽器里可以，程序里不行，多半就是 Headers 信息不正確。你可以從 Chrome 上把這些信息照搬到程序里，以此繞過(guò)對(duì)方的限制。
點(diǎn)擊列表中的一個(gè)具體請(qǐng)求，上述信息都可以找到。
找對(duì)請(qǐng)求，設(shè)對(duì)方法，傳對(duì)參數(shù)以及?Headers?信息，大部分的網(wǎng)站上的信息都可以搞定了。
Network 還有個(gè)功能：右鍵點(diǎn)擊列表，選擇“Save as HAR with content”，保存到文件。這個(gè)文件包含了列表中所有請(qǐng)求的各項(xiàng)參數(shù)及返回值信息，以便你查找分析。（實(shí)際操作中，我發(fā)現(xiàn)經(jīng)常有直接搜索無(wú)效的情況，只能保存到文件后搜索）
除了 Elements 和 Network，開(kāi)發(fā)者工具中還有一些功能，比如：
Sources，查看資源列表和調(diào)試 JS。
Console，顯示頁(yè)面的報(bào)錯(cuò)和輸出，并且可以執(zhí)行 JS 代碼。很多網(wǎng)站會(huì)在這里放上招聘的彩蛋（自己多找些知名網(wǎng)站試試）。
但這些功能和爬蟲(chóng)關(guān)系不大。如果你開(kāi)發(fā)網(wǎng)站和優(yōu)化網(wǎng)站速度，就需要和其他功能打交道。這里就不多說(shuō)了。
總結(jié)一下，其實(shí)你就記住這幾點(diǎn)：
“查看源代碼”里能看到的數(shù)據(jù)，可以直接通過(guò)程序請(qǐng)求當(dāng)前 URL 獲取。
Elements?里的 HTML 代碼不等于請(qǐng)求返回值，只能作為輔助。
在?Network?里用內(nèi)容關(guān)鍵字搜索，或保存成?HAR?文件后搜索，找到包含數(shù)據(jù)的實(shí)際請(qǐng)求
查看請(qǐng)求的具體信息，包括方法、headers、參數(shù)，復(fù)制到程序里使用。
理解了這幾步，大部分網(wǎng)上的數(shù)據(jù)都可以拿到，說(shuō)“解決一半的問(wèn)題”可不是標(biāo)題黨。
當(dāng)然咯，說(shuō)起來(lái)輕松幾點(diǎn)，想熟練掌握，還是有很多細(xì)節(jié)要考慮，需要不斷練習(xí)。但帶著這幾點(diǎn)再去看各種爬蟲(chóng)案例，思路會(huì)更清晰。
-END-
