爬蟲開發技術基礎之分析工具-Chrome開發者工具

簡介

Chrome 開發者工具是一套內置於Google Chrome中的Web開發和調試工具，可用來對網站進行迭代、調試和分析。
Chrome 開發者工具中最經常使用的三個模塊是元素面板、控制檯面板、網絡面板。

關於Chrome開發者工具的詳細介紹參見官方文檔

如下內容轉載自selfboot的博文。

這裏我假設你用的是Chrome瀏覽器，若是剛好你作web開發，或者是比較好奇網頁中的一些渲染效果而且喜歡折騰，那麼你必定知道Chrome的開發者工具了。其實其餘瀏覽器也有相似工具，好比Firefox下的firebug。本文將會詳細講述如何使用Chrome開發者工具，但願裏面有些讓你感到驚豔的東西！即便你不用Chrome，那麼文中的某些內容也會至關有用。

首先囉嗦一下如何打開開發者工具吧。能夠直接在頁面上點擊右鍵，而後選擇審查元素；或者是打開Tools–Developer Tools；或者是用快捷鍵Command + I 打開。打開後咱們看到的界面大概以下：

Google Chrome一共提供了8大組工具：

• Elements: 容許咱們從瀏覽器的角度看頁面，也就是說咱們能夠看到chrome渲染頁面所須要的的HTML、CSS和DOM(Document Object Model)對象。此外，還能夠編輯這些內容更改頁面顯示效果；

• Network: 能夠看到頁面向服務器請求了哪些資源、資源的大小以及加載資源花費的時間，固然也能看到哪些資源不能成功加載。此外，還能夠查看HTTP的請求頭，返回內容等；

• Sources: 主要用來調試js；

• Timeline: 提供了加載頁面時花費時間的完整分析，全部事件，從下載資源處處理Javascript，計算CSS樣式等花費的時間都展現在Timeline中；

• Profiles: 分析web應用或者頁面的執行時間以及內存使用狀況；

• Resources: 對本地緩存（IndexedDB、Web SQL、Cookie、應用程序緩存、Web Storage）中的數據進行確認及編輯；

• Audits: 分析頁面加載的過程，進而提供減小頁面加載時間、提高響應速度的方案；

• Console: 顯示各類警告與錯誤信息，而且提供了shell用來和文檔、開發者工具交互。

強大的Chrome開發者工具提供了很棒的提示功能，當咱們把鼠標懸停在某些項時，會顯示一些頗有用的提示信息，有時候咱們能夠獲得意想不到的收穫。此外，開發者工具還提供了Emulation功能，作移動開發時特別有用。下面先詳細研究一下8大工具的使用方法。

Elements

Elements工具像一把手術刀同樣「解剖」了當前頁面，咱們看到的Elements頁面通常像這樣子：

圖中標記爲1的紅色區塊爲頁面HTML文件，HTML中的每一個元素好比、

都是一個DOM節點，全部的DOM節點組成了DOM樹。咱們徹底能夠把紅色區塊1當作是DOM樹，把HTML元素標籤看作DOM節點。

當咱們在這裏選中某一DOM對象時，網頁中相應元素也會被陰影覆蓋。咱們能夠對DOM對象進行修改，修改後結果會在頁面實時顯示出來。此外，還能夠用Command+f搜索DOM樹中指定的內容，或者是以HTML形式更改頁面元素，以下圖：

選中DOM對象以後右鍵便可以看到一些輔助的功能，如圖中標記爲2的區塊所示：

• Add Attribute: 在標籤中增長新的屬性；

• Force Element State: 有時候咱們爲頁面元素添加一些動態的樣式，好比當鼠標懸停在元素上時的樣式，這種動態樣式很難調試。咱們可使用Force Element State強制元素狀態，便於調試，以下圖：
  

• Edit as HTML: 以HTML形式更改頁面元素；

• Copy XPath: 複製XPath；

• Delete Node: 刪除DOM節點；

• Break On: 設置DOM 斷點。

圖中被標記爲3的藍色區塊顯示當前標籤的路徑：從html開始一直到當前位置，咱們單擊路徑中任何一個標籤，便可以跳轉到相應標籤內容中去。

圖中標記爲4的藍色區塊實時顯示當前選中標籤的CSS樣式、屬性等，一共有如下5小部分：

• Styles: 顯示用戶定義的樣式，好比請求的default.css中的樣式，和經過Javasript生成的樣式，還有開發者工具添加的樣式；

• Computed: 顯示開發者工具計算好的元素樣式；

• Event Listeners: 顯示當前HTML DOM節點和其祖先節點的全部JavaScript事件監聽器，這裏的監聽腳本能夠來自Chrome的插件。能夠點擊右邊小漏斗形狀(filter)選擇只顯示當前節點的事件監聽器。

• DOM Breakpoints: 列出全部的DOM 斷點；

• Properties: 超級全面地列出當前選中內容的屬性，不過基本不多用到。

實際應用中咱們常常會用到Styles，以下圖：

圖中標記爲1的+號爲New style rule，能夠爲當前標籤添加新的選擇器，新創建的樣式爲inspector-stylesheet。此外，也能夠直接在原有的樣式上增長、修改、禁用樣式屬性，如圖中標記2顯示。

在New style rule右邊爲Toggle Element State，選擇後會出現標記3顯示的選擇框，若是選中:hover後，便可以看到鼠標懸停在頁面元素上時的CSS樣式了，做用相似於前面的Force Element State，更多內容能夠看:hover state in Chrome Developer Tools 。

更強大的是，開發者工具以直觀的圖形展現了盒子模型的margin、border、padding部分，如標記5所示。下面動態圖給出了盒子模型的一個示例：

Network

有時候咱們的網頁加載的很慢，而相同網速下，其餘網頁加載速度並不慢。這時候就得考慮優化網頁，優化前咱們必須知道加載速度的瓶頸在哪裏，這個時候能夠考慮使用Network工具。下圖爲個人博客首頁加載時的Network狀況：

請求的每一個資源在Network表格中顯示爲一行，每一個資源都有許多列的內容(如紅色區塊1)，不過默認狀況下不是全部列都顯示出來。

• Name/Path: 資源名稱以及URL路徑；

• Method: HTTP請求方法；

• Status/Text: HTTP狀態碼/文字解釋；

• Type: 請求資源的MIME類型；

• Initiator解釋請求是怎麼發起的，有四種可能的值：

  1. Parser：請求是由頁面的HTML解析時發送的；

  2. Redirect：請求是由頁面重定向發送的；

  3. Script：請求是由script腳本處理髮送的；

  4. Other：請求是由其餘過程發送的，好比頁面裏的link連接點擊，在地址欄輸入URL地址。

• Size/Content: Size是響應頭部和響應體結合起來的大小，Content是請求內容解碼後的大小。進一步瞭解能夠看這裏Chrome Dev Tools - 「Size」 vs 「Content」；

• Time/Latency: Time是從請求開始到接收到最後一個字節的總時長，Latency是從請求開始到接收到第一個字節的時間；

• Timeline: 顯示網絡請求的可視化瀑布流，鼠標懸停在某一個時間線上，能夠顯示整個請求各部分花費的時間。
  以上是默認顯示的列，不過咱們能夠在瀑布流的頂部右鍵，這樣就能夠選擇顯示或者隱藏更多的列，好比Cache-Control, Connection, Cookies, Domain等。

咱們能夠按照上面任意一項來給資源請求排序，只須要單擊相應的名字便可。Timeline排序比較複雜，單擊Timeline後，須要選擇根據Start Time、Response Time、End Time、Duration、Latency中的一項來排序。

紅色區塊2中，一共有6個小功能：

1. Record Network Log: 紅色表示此時正在記錄資源請求信息；

2. Clear: 清空全部的資源請求信息；

3. Filter: 過濾資源請求信息；

4. Use small resource raws: 每一行顯示更少的內容；

5. Perserve Log: 再次記錄請求的信息時不擦出以前的資源信息；

6. Disable cache: 不容許緩存的話，全部資源均從新加載。

選擇Filter後，就會出現如紅色區塊3所顯示的過濾條件，當咱們點擊某一內容類型(能夠是Documents, Stylesheets, Images, Scripts, XHR, Fonts, WebSockets, Other)後，只顯示該特定類型的資源。在XHR請求中，能夠在一個請求上右鍵選擇「Replay XHR」來從新運行一個XHR請求。

有時候咱們須要把Network裏面內容傳給別人，這時候能夠在資源請求行的空白處右鍵而後選擇Save as HAR with Content保存爲一個HAR文件。而後能夠在一些第三方工具網站，好比這裏重現網絡請求信息。

選定某一資源後，咱們還能夠Copy as cURL，也就是複製網絡請求做爲curl命令的參數，詳細內容看 Copying requests as cURL commands

此外，咱們還能夠查看網絡請求的請求頭，響應頭，已經返回的內容等信息，以下圖：

資源的詳細內容有如下幾個：

• HTTP request and response headers

• Resource preview: 可行時進行資源預覽；

• HTTP response: 未處理過的資源內容；

• Cookie names and values: HTTP請求以及返回中傳輸的全部Cookies；

• WebSocket messages: 經過WebSocket發送和接收到的信息；

• Resource network timing: 圖形化顯示資源加載過程當中各階段花費的時間。

楚江數據是一家專業的互聯網數據技術服務商，提供網站APP數據採集和爬蟲軟件定製開發服務，服務範圍涵蓋社交網絡、電子商務、分類信息、學術研究等。
官方網站 http://www.chujiangdata.com。

本文環境

操做系統：OS X 10.9.4Chrome版本：Version 37.0.2062.120