<h3>開發者工具的打開</h3>
直接在頁面上點擊右鍵，然后選擇審查元素；
或者是打開Tools--Developer Tools；
或者是用快捷鍵 Command Option + I
打開；
然后會在上方看見八大工具：
<h5>Elements:</h5> 允許我們從瀏覽器的角度看頁面，也就是說我們可以看到chrome渲染頁面所需要的的HTML、CSS和DOM(Document Object Model)對象。此外，還可以編輯這些內容更改頁面顯示效果；
<h5>Network:</h5> 可以看到頁面向服務器請求了哪些資源、資源的大小以及加載資源花費的時間，當然也能看到哪些資源不能成功加載。此外，還可以查看HTTP的請求頭，返回內容等；
<h5>Sources:</h5> 主要用來調試js；
<h5>Timeline:</h5> 提供了加載頁面時花費時間的完整分析，所有事件，從下載資源到處理Javascript，計算CSS樣式等花費的時間都展示在Timeline中；
<h5>Profiles:</h5> 分析web應用或者頁面的執行時間以及內存使用情況；
<h5>Resources:</h5> 對本地緩存（IndexedDB、Web SQL、Cookie、應用程序緩存、Web Storage）中的數據進行確認及編輯；
<h5>Audits: </h5>分析頁面加載的過程，進而提供減少頁面加載時間、提升響應速度的方案；
<h5>Console:</h5> 顯示各種警告與錯誤信息，并且提供了shell用來和文檔、開發者工具交互。
<h5>*DOM= Document Object Model[文檔對象模型]</h5>DOM可以以一種獨立于平臺和語言的方式訪問和修改一個文檔的內容和結構。換句話說，這是表示和處理一個HTML或XML文檔的常用方法。
DOM實際上是以面向對象方式描述的文檔模型。DOM定義了表示和修改文檔所需的對象、這些對象的行為和屬性以及這些對象之間的關系。可以把DOM認為是頁面上數據和結構的一個樹形表示，不過頁面當然可能并不是以這種樹的方式具體實現。
HTML中的每個元素比如<body>、<p>
都是一個DOM節點，所有的DOM節點組成了DOM樹。我們完全可以把整個頁面當做是DOM樹，把HTML元素標簽看做DOM節點。
選中DOM對象之后右鍵即可以看到一些輔助的功能，在頁面上方可看見：
Add Attribute: 在標簽中增加新的屬性；
Force Element State: 有時候我們為頁面元素添加一些動態的樣式，比如當鼠標懸停在元素上時的樣式，這種動態樣式很難調試。我們可以使用Force Element State
強制元素狀態，便于調試，如下圖：
![圖4. 強制元素狀態][4]
Edit as HTML: 以HTML形式更改頁面元素；
1.Copy XPath: 復制XPath；
2.Delete Node: 刪除DOM節點；
3.Break On: 設置DOM 斷點。
右邊是當選中標簽時css樣式圖，
<h5>Styles: </h5>顯示用戶定義的樣式，比如請求的default.css中的樣式，和通過Javasript生成的樣式，還有開發者工具添加的樣式；
<h5>Computed:</h5> 顯示開發者工具計算好的元素樣式；
<h5>Event Listeners:</h5> 顯示當前HTML DOM節點和其祖先節點的所有JavaScript事件監聽器，這里的監聽腳本可以來自Chrome的插件。可以點擊右邊小漏斗形狀(filter)選擇只顯示當前節點的事件監聽器。
<h5>DOM Breakpoints:</h5> 列出所有的DOM 斷點；
<h5>Properties:</h5> 超級全面地列出當前選中內容的屬性，不過基本很少用到。
一般情況下使用style
圖中的+號為New style rule，可以為當前標簽添加新的選擇器，新建立的樣式為inspector-stylesheet。此外，也可以直接在原有的樣式上增加、修改。
在New style rule右邊為Toggle Element State，選擇后會出現的選擇框，如果選中:hover后，即可以看到鼠標懸停在頁面元素上時的CSS樣式了，作用類似于前面的Force Element Satte 。
更多參考我的博客園http://www.cnblogs.com/wenqingqing/;
我的博客https://welkin-qing.github.io/
