網頁分析方法1 瀏覽器開發人員工具

瀏覽器開發人員工具可以詳細的檢視網頁布局、請求、響應資料，是爬蟲應用中非常實用的工具，也是常用的工具。下面以chrome瀏覽器中的開發人員工具進行講解。其他瀏覽器類似。

1.開啟網頁，調出開發者工具。

•按f12快捷鍵

•右鍵檢查元素調出

•快捷鍵ctrl +shift +i

2開發者工具簡單介紹

可以看到主頁面分為上面的工具欄和下面的資訊展示欄兩部分。工具欄有8個主要的工具可以檢視開發工具.

其中最常用的四個功能模組：元素（elements）、控制台（console）源**(sources)，網路（network）。

在爬蟲開發中，主要用到的工具有elements與network。前者用於檢視所需抓取的元素，後者用於檢視http請求的相關引數與方法。

3.elements面板

選擇elements面板，單擊工具欄最左側的滑鼠按鈕（或按快捷鍵ctrl+shift+c）後，單擊頁面任意元素，在詳細區域會被高亮顯示，再次單擊可退出該模式。

通過此功能可以快速實現元素的定位，對除錯**非常有用。

在html頁面中，每個元素（如、)都是乙個dom節點，所有的dom節點組成了dom樹。因此可以把詳情區域當作dom樹，把html元素標籤看作dom節點。同樣，在單擊選擇dom節點時，網頁中對應的元素也會被高亮顯示，如圖：

元素定位

找到需要抓取的元素，在**中一般使用css與xpath兩種方式來實現定位。elements面板中可以直接右擊複製相應的定位方法，copy selector為css路徑。copy xpath 為xpath 路徑，如圖所示：

4.network面板

在開啟乙個網頁時，會發起相應的http請求，而network面板能夠監聽記錄所有的網路訪問請求與響應請求。這一點在分析非同步載入請求時非常有用。此處以搜尋首頁為例。如圖：

network面板

選中某一條請求，以第乙個nicon-2x-6258e 1cf13.png為例，檢視請求詳細資訊。如圖所示：

請求資料資訊

詳細資訊包括headers、preview、response、initiator、timing5個標籤頁。（有些只有headers、preview、response、timing四個標籤頁）

1）在headers標籤中，主要分為以下3部分。

2）preview標籤頁對返回的資訊進行格式化預覽，如圖：

preview預覽返回結果

4）timing標籤頁顯示每一步動作所消耗的時間，如圖：

timing標籤頁

5.控制台（console）

.檢視js物件的及其屬性：回車顯示結果。

執行js**：

檢視控制台日誌：

當網頁的js**中使用了console.log()函式時，該函式輸出的日誌資訊會在控制台中顯示。日誌資訊一般在開發除錯時啟用，而當正式上線後，一般會將該函式去掉。