左邊可以看到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中這個問題： https://stackoverflow.com/questions/2008592/can-i-find-events-bound-on-an-element-with-jquery 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機制。 https://stackoverflow.com/questions/20366823/event-listeners-in-chrome-with-jquery 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. http://www.360doc.com/content/15/0424/09/10504424_465600053.shtml 從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的實作比較優雅。 https://github.com/zertosh/jquery-audit https://github.com/DataTables/VisualEvent https://developers.google.cn/web/updates/2015/05/get-and-debug-event-listeners 找到函數，并打斷點 var targetFun = function() {XXX} debug(targetFun) // 那麼在調用的時候就會跳轉進該函數，跟打斷點效果一樣。但是有時候找不到函數定義在哪，這個方法就很好了。 undug(targetFun) // 取消Debug某個函數 |
| | 在DOM元素上右鍵，有 “Break On” 選項，針對三種不同的DOM操作可以打斷點。 在DOM Breakpoints Tab 中可以看到這些斷點。 |
| | Properties Tab用來檢視所有的屬性 |