這裏我假設你用的是Chrome瀏覽器，如果恰好你做web開發，或者是比較好奇網頁中的一些渲染效果並且喜歡折騰，那麼你一定知道Chrome的開發者工具了。其實其他瀏覽器也有類似工具，比如Firefox下的firebug。本文將會詳細講述如何使用Chrome開發者工具，希望裏面有些讓你感到驚豔的東西！即使你不用Chrome，那麼文中的某些內容也會相當有用。
首先囉嗦一下如何打開開發者工具吧。可以直接在頁面上點擊右鍵，然後選擇審查元素；或者是打開Tools–Developer Tools；或者是用快捷鍵Command + I 打開。打開後我們看到的界面大概如下：
圖1. 開發者工具概況
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頁面一般像這樣子：
圖2. Element 總體效果
圖中標記爲1的紅色區塊爲頁面HTML文件，HTML中的每個元素比如、
都是一個DOM節點，所有的DOM節點組成了DOM樹。我們完全可以把紅色區塊1當做是DOM樹，把HTML元素標籤看做DOM節點。
當我們在這裏選中某一DOM對象時，網頁中相應元素也會被陰影覆蓋。我們可以對DOM對象進行修改，修改後結果會在頁面實時顯示出來。此外，還可以用Command+f搜索DOM樹中指定的內容，或者是以HTML形式更改頁面元素，如下圖：
圖3. 更改內容
選中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，如下圖：
圖5. Element 樣式
圖中標記爲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所示。下面動態圖給出了盒子模型的一個示例：
圖6. 盒子模型示例
Network
有時候我們的網頁加載的很慢，而相同網速下，其他網頁加載速度並不慢。這時候就得考慮優化網頁，優化前我們必須知道加載速度的瓶頸在哪裏，這個時候可以考慮使用Network工具。下圖爲我的博客首頁加載時的Network情況：
圖7. Network 總體效果
請求的每個資源在Network表格中顯示爲一行，每個資源都有許多列的內容(如紅色區塊1)，不過默認情況下不是所有列都顯示出來。
- Name/Path: 資源名稱以及URL路徑；
- Method: HTTP請求方法；
- Status/Text: HTTP狀態碼/文字解釋；
- Type: 請求資源的MIME類型；
-
Initiator解釋請求是怎麼發起的，有四種可能的值：
- Parser：請求是由頁面的HTML解析時發送的；
- Redirect：請求是由頁面重定向發送的；
- Script：請求是由script腳本處理髮送的；
- 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請求。
***********************************XHR*****************************
ajax是asynchronous javascript and XML的簡寫，中文翻譯是異步的javascript和XML，這一技術能夠向服務器請求額外的數據而無須卸載頁面,雖然名字中包含XML，但ajax通信與數據格式無關.
ajax包括以下幾步驟：1、創建AJAX對象；2、發出HTTP請求；3、接收服務器傳回的數據；4、更新網頁數據
概括起來就是，ajax通過原生的XMLHttpRequest對象發出HTTP請求，得到服務器返回的數據後，再進行處理
ajax技術的核心是XMLHttpRequest對象(簡稱XHR),XHR爲向服務器發送請求和解析服務器響應提供了流暢的接口，能夠以異步方式從服務器取得更多信息
1、創建
創建一個XHR對象，也叫實例化一個XHR對象，因爲XMLHTTPRequest()是一個構造函數，
xhr = new XMLHttpRequest();
2、發送請求
在使用XHR對象時，要調用的第一個方法是open()，該方法接受3個參數
xhr.open("get","example.php",false);
send()方法接收一個參數，即要作爲請求主體發送的數據。調用send()方法後，請求被分派到服務器
如果是GET方法，send()方法無參數，或參數爲null；如果是POST方法，send()方法的參數爲要發送的數據
xhr.send(null);
3、接受響應
responseText: 作爲響應主體被返回的文本(文本形式)；
responseXML: 如果響應的內容類型是'text/xml'或'application/xml'，這個屬性中將保存着響應數據的XML DOM文檔(document形式)；
status: HTTP狀態碼(數字形式)；
statusText: HTTP狀態說明(文本形式)；
瀏覽器禁止跨域訪問：
協議、域名、端口
可以實現跨域訪問的標籤：
<image>站點統計
<link>
<script>
<iframe>
同源策略，不同源地址之間，默認不能相互發送AJAX請求
1、藉助<script>實現跨域請求，只能get請求
2、代理，通過後臺(ASP、PHP、JAVA、ASP.NET)獲取其他域名下的內容，然後再把獲取的內容返回到前端
3、JSONP，通過script 標籤請求一個服務端的PHP文件，這個文件返回的結果是一段JS，作用是調用我們事先定義好的一個函數
從而將服務端想要給客戶端發送過去的數據發送給客戶端。
有時候我們需要把Network裏面內容傳給別人，這時候可以在資源請求行的空白處右鍵然後選擇Save as HAR with Content保存爲一個HAR文件。然後可以在一些第三方工具網站，比如這裏重現網絡請求信息。
選定某一資源後，我們還可以Copy as cURL，也就是複製網絡請求作爲curl命令的參數，詳細內容看 Copying requests as cURL commands
此外，我們還可以查看網絡請求的請求頭，響應頭，已經返回的內容等信息，如下圖：
圖8. 網頁請求內容
資源的詳細內容有以下幾個：
- HTTP request and response headers
- Resource preview: 可行時進行資源預覽；
- HTTP response: 未處理過的資源內容；
- Cookie names and values: HTTP請求以及返回中傳輸的所有Cookies；
- WebSocket messages: 通過WebSocket發送和接收到的信息；
- Resource network timing: 圖形化顯示資源加載過程中各階段花費的時間。
補充解釋
XPath 是一門在 XML 文檔中查找信息的語言。XPath 用於在 XML 文檔中通過元素和屬性進行導航。比如在圖2中，
|
1 |
<a href="https://github.com/NUKnightLab/TimelineJS">這裏</a> |
這裏a標籤的Xpath爲：/html/body/div[2]/p[1]/a，解讀爲：html裏面body標籤的第二個div標籤的第一個p標籤下的a標籤。
HTML DOM允許我們在某一事件發生時執行特定的JavaScript腳本，這裏的事件可以是：
- 鼠標移到某元素之上；
- 窗口或框架被重新調整大小；
- 文本被選中；
- 用戶在HTML元素上單擊；
- 某個鍵盤按鍵被按下…
這裏事件發生時執行的javascript腳本就是事件監聽器。
DOM 斷點（DOM Breakpoints）可以監聽某個 DOM 被修改情況，在Elements中某個元素上右鍵可以設置三種不同情況的斷點：
- 子節點修改
- 自身屬性修改
- 自身節點被刪除
設置後 DOM Breakpoints 列表中就會出現該 DOM 斷點。
一旦監聽的DOM被修改時，斷點就會定位到執行修改操作的代碼，這對於綁定了多個事件的 DOM 調試有很大的幫助。
XMLHttpRequest是一個瀏覽器接口，使得Javascript可以進行HTTP(S)通信。XMLHttpRequest 對象用於在後臺與服務器交換數據，這樣就可以
- 在不重新加載頁面的情況下更新網頁
- 在頁面已加載後從服務器請求數據
- 在頁面已加載後從服務器接收數據
- 在後臺向服務器發送數據