如何在瀏覽器中高效抓包分析數據？

用瀏覽器抓包分析數據的使用場景非常受限，且後面還要由一門後端語言做補充，這裡只是提供一種更簡單的思路，即：

用CSS選擇器代替正則表達式

離開場景談技術都是耍流氓，直接用瀏覽器抓包分析數據需要滿足以下幾點要求：

1、數據相對靜態，且不會經常變化；

2、數據量非常多，人工提取非常麻煩；

3、所有數據基本上可在一張頁面上抓取完畢，用後端語言請求url再分析html成本較高且速度慢。

可能有人會問，真的有這樣的場景存在嗎？

答，存在，目前我已經遇到了不下十個這樣類似的場景。

設想以下這樣一個場景：（注意，本場景不涉及HTTP相關內容，不在本文討論範圍內）

用戶可以自定義一個項目，這個項目有名稱，有圖標。其中圖標使用Font Awesome，一套絕佳的圖標字體庫和CSS框架，需要有一個可供選擇的列表。

我們打開fontawesome官網，發現有675個圖標，假如手工錄入這些圖標到我們的程序中，顯然是十分低效且浪費時間的，而用後端請求然後寫正則，調bug也要很多時間，於是我們選擇最簡單最粗暴的方式——直接用瀏覽器抓，即在開發者工具中寫代碼獲取DOM數據。

先想下我們要獲取什麼：

這裡為簡化演示，只獲取一種數據：圖標的類名，即獲取頁面中所有類似「address-book」，「bath」的類名。

既然是在瀏覽器中抓取數據，自然會涉及到DOM操作，涉及到DOM操作的自然要選擇jQuery，所以我們先測試下該網站有沒有用到jQuery。

很好，直接可以使用，那麼下一步就要分析DOM結構。

選擇一個節點，查看其結構，可以發現以下信息：

1、每一個圖標項都由類「fa-hover col-md-3 col-sm-4」包裹起來，這為我們獲取整個頁面所有的圖表數據提供了很大方便；

2、類名在span標籤的後面。

那麼現在我們試一下使用「fa-hover col-md-3 col-sm-4」獲取所有圖標數據項。

從圖中可以看到，我們獲取了975個數據，接下來就是要從這些dom中獲取圖標類名，直接上代碼。

先輸出所有的dom，確認一下，接下來開始獲取數據。

再分析一下dom結構，我們需要的數據是"yc-square"，直接用text函數可以直接獲取：

但這還不夠，我們需要的是example of後面的數據，所以繼續分割處理：

成功獲取，最後一步是將這些數據結構化：

將其全部push到數組中，然後json化，這樣這些數據就可以複製粘貼到程序中使用了。

當然，這裡只是為了演示，所以生成的結構也比較簡單，事實上，我們還可以為這些數據分類。

這是實際業務中所使用的結構。

回到我們的主題：用瀏覽器高效抓包分析數據。

在這種業務需求下，不需要請求url，不用寫正則表達式，最多只需要5分鐘就可以獲得所需數據，是一種十分高效的方式，而這種方式也是可以直接無縫遷移到後端中的。

為什麼要遷移到後端？因為配合jQuery的高效選擇器，完全可以代替正則表達式在爬蟲數據分析領域的地位，畢竟在Web中，存在著大量的HTML數據，而如果用jQuery選擇器分析這些數據，無疑將降低很大門檻，提高更多開發生產效率。

推薦一個庫可以在node中直接使用jQuery：tmpvar/jsdom

不僅如此，還可以在直接運行V8編譯前端JavaScript，然後分析其產生的HTML。

在node中用jQuery分析HTML我還沒試過，但是我已經通過在瀏覽器中獲取元數據然後放到後端進行業務處理完成了大量事情。

還有一類網站擁有大量下載鏈接，且都是公開的在HTML中的。目前，我已經用這種方法下載了大量數據，後端接上node進行處理，非同步模型也真的非常贊。

私以為，未來Node將撼動Python在爬蟲領域的地位，而CSS選擇器也將撼動正則表達式在數據提取方面的地位。
推薦閱讀：