神器——Chrome開發者工具(一)

時間 2019-11-05

原文原文鏈接

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

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

html5

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

Elements: 容許咱們從瀏覽器的角度看頁面，也就是說咱們能夠看到chrome渲染頁面所須要的的HTML、CSS和DOM(Document Object Model)對象。此外，還能夠編輯這些內容更改頁面顯示效果；git
Network: 能夠看到頁面向服務器請求了哪些資源、資源的大小以及加載資源花費的時間，固然也能看到哪些資源不能成功加載。此外，還能夠查看HTTP的請求頭，返回內容等；github
Sources: 主要用來調試js；web
Timeline: 提供了加載頁面時花費時間的完整分析，全部事件，從下載資源處處理Javascript，計算CSS樣式等花費的時間都展現在Timeline中；chrome
Profiles: 分析web應用或者頁面的執行時間以及內存使用狀況；shell
Resources: 對本地緩存（IndexedDB、Web SQL、Cookie、應用程序緩存、Web Storage）中的數據進行確認及編輯；
Audits: 分析頁面加載的過程，進而提供減小頁面加載時間、提高響應速度的方案；
Console: 顯示各類警告與錯誤信息，而且提供了shell用來和文檔、開發者工具交互。

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

Elements

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

圖中標記爲1的紅色區塊爲頁面HTML文件，HTML中的每一個元素好比<body>、<p>都是一個DOM節點，全部的DOM節點組成了DOM樹。咱們徹底能夠把紅色區塊1當作是DOM樹，把HTML元素標籤看作DOM節點。

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

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

Add Attribute: 在標籤中增長新的屬性；
Force Element State: 有時候咱們爲頁面元素添加一些動態的樣式，好比當鼠標懸停在元素上時的樣式，這種動態樣式很難調試。咱們可使用Force Element State強制元素狀態，便於調試，以下圖：
```
![圖4. 強制元素狀態][4]
```
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 Satte，更多內容能夠看: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個小功能：

Record Network Log: 紅色表示此時正在記錄資源請求信息；
Clear: 清空全部的資源請求信息；
Filter: 過濾資源請求信息；
Use small resource raws: 每一行顯示更少的內容；
Perserve Log: 再次記錄請求的信息時不擦出以前的資源信息；
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: 圖形化顯示資源加載過程當中各階段花費的時間。

補充解釋

[XPath]

XPath 是一門在 XML 文檔中查找信息的語言。XPath 用於在 XML 文檔中經過元素和屬性進行導航。好比在圖2中，

<a href="https://github.com/NUKnightLab/TimelineJS">這裏</a>

這裏a標籤的Xpath爲：/html/body/div[2]/p[1]/a，解讀爲：html裏面body標籤的第二個div標籤的第一個p標籤下的a標籤。

[HTML DOM事件]

HTML DOM容許咱們在某一事件發生時執行特定的JavaScript腳本，這裏的事件能夠是：

鼠標移到某元素之上；
窗口或框架被從新調整大小；
文本被選中；
用戶在HTML元素上單擊；
某個鍵盤按鍵被按下...

這裏事件發生時執行的javascript腳本就是事件監聽器。

[DOM 斷點]

DOM 斷點（DOM Breakpoints）能夠監聽某個 DOM 被修改狀況，在Elements中某個元素上右鍵能夠設置三種不一樣狀況的斷點：

子節點修改
自身屬性修改
自身節點被刪除

設置後 DOM Breakpoints 列表中就會出現該 DOM 斷點。

一旦監聽的DOM被修改時，斷點就會定位到執行修改操做的代碼，這對於綁定了多個事件的 DOM 調試有很大的幫助。

[XMLHttpRequest]

XMLHttpRequest是一個瀏覽器接口，使得Javascript能夠進行HTTP(S)通訊。XMLHttpRequest 對象用於在後臺與服務器交換數據，這樣就能夠

在不從新加載頁面的狀況下更新網頁
在頁面已加載後從服務器請求數據
在頁面已加載後從服務器接收數據
在後臺向服務器發送數據

更多關於XHR的內容能夠看阮一峯老師的XMLHttpRequest Level 2 使用指南。

[WebSocket]

WebSocket規範定義了一種 API，可在網絡瀏覽器和服務器之間創建「套接字」鏈接。簡單地說：客戶端和服務器之間存在持久的鏈接，並且雙方均可以隨時開始發送數據。這樣就解決了長期以來只能由客戶端發起請求才能從服務器獲取信息這一問題。

更多關於WebSocket的內容能夠看[WebSockets 簡介：將套接字引入網絡]()

[本文環境]

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

參考：
Chrome DevTools Overview
Introduction to Chrome Developer Tools
Chrome Dev Tools: Networking and the Console

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。