Chrome開發(fā)者工具的小技巧有哪些呢

在《論語》中，孔子提倡“學(xué)而不思則罔，思而不學(xué)則殆”的學(xué)習(xí)方法。我們?cè)偻顚用嫱诰颍八肌本烤故窃谒伎际裁矗總€(gè)人理解是思考并總結(jié)出一些共性的東西，即“套路”。有套路了，我們學(xué)習(xí)或工作會(huì)更加有效率。

當(dāng)我們爬取不同的網(wǎng)站是，每個(gè)網(wǎng)站頁面的實(shí)現(xiàn)方式各不相同，我們需要對(duì)每個(gè)網(wǎng)站都進(jìn)行分析。那是否有一些通用的分析方法？我分享下自己爬取分析的“套路”。在某個(gè)網(wǎng)站上，分析頁面以及抓取數(shù)據(jù)，我用得最多的工具是 Chrome 開發(fā)者工具。

Chrome 開發(fā)者工具是一套內(nèi)置于 Google Chrome 中的 Web 開發(fā)和調(diào)試工具，可用來對(duì)網(wǎng)站進(jìn)行迭代、調(diào)試和分析。因?yàn)閲?guó)內(nèi)很多瀏覽器內(nèi)核都是基于 Chrome 內(nèi)核，所以國(guó)產(chǎn)瀏覽器也帶有這個(gè)功能。例如：UC 瀏覽器、QQ 瀏覽器、360 瀏覽器等。

接下來，我們來看看 Chrome 開發(fā)者工具一些比較牛逼的功能。

通過元素（Element）面板，我們能查看到想抓取頁面渲染內(nèi)容所在的標(biāo)簽、使用什么 CSS 屬性（例如：class="middle"）等內(nèi)容。例如我想要抓取我知乎主頁中的動(dòng)態(tài)標(biāo)題，在網(wǎng)頁頁面所在處上右擊鼠標(biāo)，選擇“檢查”，可進(jìn)入 Chrome 開發(fā)者工具的元素面板。

通過這種方法，我們能快速定位出頁面某個(gè)DOM 節(jié)點(diǎn)，然后可以提取出相關(guān)的解析語句。鼠標(biāo)移動(dòng)到節(jié)點(diǎn)，然后右擊鼠標(biāo)，選擇 “Copy”，能快速?gòu)?fù)制出 Xpath 、CSS elector 等內(nèi)容解析庫的解析語句。

網(wǎng)絡(luò)（Network）面板記錄頁面上每個(gè)網(wǎng)絡(luò)操作的相關(guān)信息，包括詳細(xì)的耗時(shí)數(shù)據(jù)、HTTP 請(qǐng)求與響應(yīng)標(biāo)頭和 Cookie，等等。這就是我們通常說的抓包。

其中的 Filters 窗格，我經(jīng)常使用其來過濾出一些 HTTP 請(qǐng)求，例如過濾出使用 Ajax 發(fā)起的異步請(qǐng)求、圖片、視頻等。

最大的窗格叫 Requests Table，此表格會(huì)列出了檢索的每一個(gè) HTTP 請(qǐng)求。 默認(rèn)情況下，此表格按時(shí)間順序排序，最早的資源在頂部。點(diǎn)擊資源的名稱可以顯示更多信息。

• Headers 是顯示 HTTP 請(qǐng)求的 Headers，我們通過這個(gè)能看到請(qǐng)求的方式，以及攜帶的請(qǐng)求參數(shù)等。

• Preview 是請(qǐng)求結(jié)果的預(yù)覽。一般用來查看請(qǐng)求到的圖片，對(duì)于抓取圖片網(wǎng)站比較給力。

• Response 是請(qǐng)求返回的結(jié)果。一般的內(nèi)容是整個(gè)網(wǎng)站的源代碼。如果該請(qǐng)求是異步請(qǐng)求，返回的結(jié)果內(nèi)容一般是 Json 文本數(shù)據(jù)。

• Cookies 能看到請(qǐng)求攜帶的 Cookies 以及服務(wù)器返回的 Cookies。有時(shí)候是需要使用到 Response 的 Cookies。例如，某個(gè)頁面必須登錄才能看到。