1.元素的選擇（`cmd+shift+c`）

2.選取顏色，改變顏色表示的方式

2.對元素新增屬性，編輯，複製，移動，設定斷點

2.1 有時候我們需要監聽某個 DOM 被修改情況，那麼可以在元素上設定斷點。

 在元素上可以設定三種斷點：（1）子節點修改（2）自身屬性修改（3）自身節點被刪除。

3.強制元素狀態

4.檢視元素繫結的事件

二， Source面板設定斷點

1.常用的快捷鍵

類似與sublime的查詢檔案，chrome 中 `cmd+p`（win上 `ctrl+p`）也可以查詢檔案。

檔案中定位方法，`shift+cmd+o`（win上`ctrl+shif+o`）,可以快速的查詢檔案中的方法。

檔案中搜索字串，`cmd+f`（win上`ctrl+f`）

全域性搜尋字串，`option+cmd+f`（win上`ctrl+shift+f`）

2.在原始碼上設定斷點

新增的每個斷點都會出現在右側除錯區的 Breakpoints 列表中，點選列表中斷點就會定位到內容區的斷點上。如果有多個檔案、多個斷點的話，利用 Breakpoints 列表中的斷點快速定位非常方便。

條件斷點：在斷點位置的右鍵選單中選擇“Edit Breakpoint...”可以設定觸發斷點的條件，寫一個表示式，表示式為 true 時才觸發斷點。

XHR斷點：右側除錯區 XHR Breakpoints，點選+ 並輸入 URL 包含的字串就可以監聽該 URL 的 Ajax 請求。如果想監聽所有 XHR 請求，可以什麼都不填。一旦 XHR 呼叫觸發時就會在 request.send() 的地方中斷，可以檢視函式呼叫棧分析。

3.檢視變數

在程式碼執行到斷點停下來後，我們可以單步執行程式碼，檢視變數。這些變數會被記錄在全域性，可以在控制檯中打印出來。

4.檢視呼叫棧

呼叫棧中的每一層叫做一個 frame，點選每個 frame 可以跳到該 frame 的呼叫點上。而且，還可以在 frame 上用右鍵選單重新開始執行當前 frame。有利於不斷的重複除錯，不用重複重新整理。

5.臨時修改 JavaScript 程式碼

通常我們在除錯程式碼時是這樣做的：修改程式碼→重新整理頁面→重新檢查。但其實 Chrome 中可以臨時修改 JS 檔案中的內容，儲存（Ctrl+S）就可以立即生效，結合 Console 等功能就可以立即重新除錯了。