chrome devtools 中 Elements panel 是審查 dom 元素和 css 的, 可以實時修改 dom/css.

• windows: ctrl + shift + i
• mac: cmd + opt + i

節點右鍵, 如下圖, 可以:

• 新增屬性(enter)
• 修改 html(F2)
• 刪除元素(delete)

除了右鍵, 還可以:

• h toggle 元素的 visibility 屬性
• 拖拽節點, 調整順序
• 拖拽節點到編輯器
  • 

• ctrl + z 撤銷修改

• 預設會列出 All Nodes, 這些包括代理繫結在該節點的父/祖父節點上的事件, 因為在在冒泡或捕獲階段會經過該節點
• Selected Node Only 只會列出當前節點上繫結的事件
• 每個事件會有對應的幾個屬性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture
  • 
  • handler是處理函式, 右鍵可以看到這個函式定義的位置, 一般 js 庫繫結事件會包一層, 所以這裡很難找到對應handler
  • isAtribute 表明事件是否通過 html 屬性(類似onClick)形式繫結的
  • useCapture 是 addEventListener 的第三個引數, 說明事件是以 冒泡 還是 捕獲 順序執行

• 新增規則
• 新增、修改屬性 同樣可以通過 ctrl + z 取消

• 設定斷點
  • 在 Sources 面板 js 檔案行號處設定斷點, 這裡除了常規斷點外, 還有個條件斷點(右鍵 conditional breakpoint), 在設定的條件為 true 時才會斷電, 在迴圈中需要斷點時比較有用.
  • 斷點後可以檢視 堆疊, 變數 資訊:

• 在呼叫堆疊這裡可以切換到堆疊中的任何地方重新執行(右鍵restart frame), 如果想檢視斷點前的資訊時比較有用.

• 斷點後的變數儲存到全域性
  • 選中變數, 右鍵 Evalute in console
  • 在 console 中選中輸出的內容, 右鍵 store as global variable

devtools 可以檢視某一個元素上綁定了哪些事件: Elements > Event Listeners

dom mutation event 是 DOM3 新增的新的事件, 一般是 dom 結構改變時觸發. devtools 可以對 DOMSubtreeModified DOMAttrModified 和 DOMNodeRemoved 時斷點. 對上面 元素上事件斷點(mouseover) 後不容易找到業務程式碼, 使用 mutation 斷點, 斷點後配合 call stack 就可以找到業務程式碼了, 如下圖這種情況使用全域性搜尋(ctrl + shift + f) 程式碼中 css classname 也能找到業務程式碼, 然後直接斷點也可以.

devtools 還可以對事件發生時斷點, 比如 click 發生時斷點, 這個跟 元素上事件斷點 不同, 不會限定在元素上, 只要是事件發生, 並且有 handler 就斷點; 還可以對 resize, ajax, setTimeout/setInterval 斷點.

下面這個圖是 resize 時中斷, 因為庫都代理了, 還需要在斷點處一步一步跟下去才能走到業務程式碼中.

• F8: 繼續執行
• F10: step over, 單步執行, 不進入函式
• F11: step into, 單步執行, 進入函式
• shift + F11: step out, 跳出函式
• ctrl + o: 開啟檔案
• ctrl + shit + o: 跳到函式定義位置
• ctrl + shift + f: 所有指令碼中搜索

即使當前頁面沒有載入jQuery，你也依然可以使用$和$$函式來選取元素，實際上，這兩個函式只是對document.querySelector()和document.querySelectorAll()的簡單封裝，$用於選取單個元素，$$則用於選取多個：

使用 $_ 來引用最近的一個表示式

除了$_，你還可以使用$0,$1,$2,$3,$4這5個變數來引用最近選取過的5個DOM元素。 $0 為Elements HTML 面板中選中的元素。 $1 為上一次在 HTML 面板中選中的元素。 $2、$3、$4 同樣的。不過只能到$4

複製到剪下板，copy之後，直接ctrl+v

在js程式碼中打點console.log() 類似debugger