左邊可以看到dom結構。這個dom結構不是網頁源代碼中的結構，而是經過你的js處理之後的結構，比如你用js添加了一些東西在頁面上。也就是說你在這裏看到的結構，並不是你右鍵 -> 查看源代碼所看到的結構。
可以看到，快捷鍵Ctrl + F(Mac:CMD+F),試試在搜索欄輸入ID選擇符或者類選擇符或者XPath就可以定位到元素啦
 |
選中dom節點，可以右鍵選擇編輯HTML或者屬性，當然也可以刪除節點。支持ctrl+z恢復操作。同時也可以爲dom節點添加斷點。當dom節點發生變化的時候，代碼會停在修改這個dom節點的js代碼的位置。
:activity
:hover
:focus
:visited
上述四個選項是觸發強制樣式。例如:hover選中之後，對應的元素就一直顯示爲hover狀態下的樣式。這樣方便對CSS進行調試。
小技巧：
擇一個DOM元素，按下Alt鍵並且鼠標雙擊選擇DOM元素前面的箭頭，就會展開該DOM元素下的所有字節點元素.
在元素面板中你可以拖拽一個元素來改變他在父類中的位置，或者將它移動到文檔中一個完全不同的地方。
|
   |
Styles Tab
用鼠標選中某個節點，就可以在右邊看到它所有的樣式。包括內聯樣式以及引入的樣式。單獨爲其寫的樣式和繼承過來的樣式。
這些樣式會按照優先級從高到低排列。
可以看到下面的很多樣式都被劃上了刪除橫線。多半是因爲優先級低樣式被覆蓋。
另外樣式前面有很多選擇框，把前面的√點掉，這個樣式就失效了。
這些樣式可以編輯，而且編輯完成之後是直接表現在頁面上的。
CSS 屬性的自動完成
開發者工具支持 CSS 屬性以及值的自動完成（包括那些需要前綴的），這對於決定爲當前元素設置什麼屬性是很有幫助的。
當你開始爲屬性或者值輸出一個名稱的時候就會彈出建議，而且你也可以使用右鍵在可用的屬性列表中滾動。要知道，選中的選項會直接應用到頁面樣式表中因此它的效果是可以直接看到的。
如果你想要展示所有支持的屬性，你可以使用 Ctrl + space 來展示一個建議列表。
+號爲New style rule，可以爲當前標籤添加新的樣式。
:activity
:hover
:focus
:visited
作用類似於前面的Force Element Satte一樣的。
Style Tab 滾動到最底下可以看到直觀的圖形展示了盒子模型的margin、border、padding部分。這一塊樣式可以動態修改的。
小技巧：
Style編輯器中，點擊顏色十六進制編碼前的小色塊，會彈出一個調色板：
可以自定義顏色值，也可以使用拾色器進行取色.調色板下方可以選擇Material Design的主要色系.
|
 |
Computed Tab
展示所有的CSS按照優先級計算之後得到的最終結果。
同樣有一個盒模型的展示，一樣可以修改。
|
  Event Listeners Tab
可以查看綁定在元素上的事件，在事件中如果包含了函數，還可以跳轉到函數定義或者存成去全局變量在Console裏調用。
但是Chrome的查看綁定事件不是很好用，比Firefox差多了。針對Jquery綁定的事件，只能跳轉到Jquery綁定事件的那部分源碼，而不能跳轉到真正執行的業務邏輯函數。那麼查看綁定事件就變得非常雞肋了。
上面的第二幅圖是Firefox的開發工具，可以看到事件是直接定位到業務邏輯函數的，而跳過了綁定事件的Jquery源碼。
爲了解決Chrome中這個問題：
In modern versions of jQuery, you would use the $._data method to find any events attached by jQuery to the element in question. Note, this is an internal-use only method:
// Bind up a couple of event handlers
$("#foo").on({
click: function(){ alert("Hello") },
mouseout: function(){ alert("World") }
});
控制檯直接敲 $._data(dom, "events"), 其中 dom 是原生 dom 對象. 這種方法在任何瀏覽器下都可以用.
The result from $._data will be an object that contains both of the events we set.
Then in Chrome, you may right click the handler function and click "view function definition" to show you the exact spot where it is defined in your code.
同時，爲了調試的時候跳過 Jquery代碼，可以跳過Jquery，可以使用上文提到過的blackboxing機制。
Chrome Developer Tools > Settings (F1) > General > Manage framework blackboxing...
Check the Blackbox content scripts to disable breaking points on Chrome extensions, and add /.*jquery.*\.js$ to the URI patterns that should be blackboxed.
Now in the Sources tab in the developer tools open Event Listener Breakpoints list on the right, and check the event you want to break the script at, this will stop the script execution on the script you've written to attach the event using jQuery.
Another quick way to blackbox a library is by right clicking its name in the Call Stack in the Sources tab. It will show up when you add an event listener break point.
從jquery2的源碼的註釋中發現,$._data會在之後的新版本中廢除。所以要有個備用方法。
直接進入控制檯，構造一個包含jQuery的對象，以便在控制檯裏查看jQuery。
比如輸入var o={j:$}，這樣做的好處是，你執行後能在控制吧裏查看jQuery的所有屬性。
然後在控制檯展開jQuery（這裏是j）對象，找到_queueHooks這個方法，看到它的代碼大概是“return L.get(a,c)||L.access…”這種，記住這個L也可能是不是L）jq2Detect2
展開任意一個j下面首層的對象，比如就是上面的_queueHooks，找到展開，再展開下面的Closure,找到前面的那個“L”對句，對着它後面的字母右鍵，選擇“Store as Global”。
然後控制檯裏就打出一個tempX的對象，它就那個裝着cache的東東。假設它叫temp1。
那個temp1有個get方法可以直接獲取它的cache對象。
假如你要查看綁定事件的對象的id叫clickMe。那執行temp1.get($('#clickMe').get(0))（或者temp1.get(document.querySelector('#clickMe'))）
除了上面的解決辦法之外，還有就是使用JQuery Audit | Visual Event插件，不過我試過了，都不是很好用。還是FF的實現比較優雅。
找到函數，並打斷點
var targetFun = function() {XXX}
debug(targetFun) // 那麼在調用的時候就會跳轉進該函數，跟打斷點效果一樣。但是有時候找不到函數定義在哪，這個方法就很好了。
undug(targetFun) // 取消Debug某個函數
|
  |
在DOM元素上右鍵，有 “Break On” 選項，針對三種不同的DOM操作可以打斷點。
在DOM Breakpoints Tab 中可以看到這些斷點。
|
 |
Properties Tab用來查看所有的屬性
|