![【譯】12個Chrome DevTools小技巧](https://i.iter01.com/images/c6b94cb2e9e7a47bb2dbf3f3b96d77961e405f544f8f07c9b36dd6d07dd5231e.png)
本文采用意譯,這是原文
1.元素拖拽
在Elements
皮膚,你可以對元素進行任意拖拽操作
![【譯】12個Chrome DevTools小技巧](https://i.iter01.com/images/db3b5c7f122fc97a0328e836531790377f8b347d5d1e78d21e3373d5be341a1a.gif)
2.獲取當前選中元素
在Elements
皮膚選中一個元素之後,在Console
中輸入$0
可以獲取到選中元素的引用
如果你使用jQuery
,那麼輸入$($0)
,可以獲取當前元素的jQuery
物件並使用相關API
![【譯】12個Chrome DevTools小技巧](https://i.iter01.com/images/0ba6aea7f244169b21716b38199b0f1c88abf5812f8c90c597024757639f8261.gif)
3.在Console
皮膚中使用最近一次操作值
在Console
皮膚中,使用$_
變數引用上一次操作返回值
![【譯】12個Chrome DevTools小技巧](https://i.iter01.com/images/f32f7dfd60d22d39efedbb4fcd7a820b3e719b632af2e3e770e48094c5dd0583.gif)
4.新增樣式和改變狀態
在Elemetns
皮膚的Styles
皮膚中,有兩個很有用的按鈕
第一個,你可以為你選擇的元素新增新樣式
![【譯】12個Chrome DevTools小技巧](https://i.iter01.com/images/5f5bbcb76202d8d90b4e1697d3e4161d2e20d302def9ab1b062c286a70fd9fc5.gif)
第二個,如果選擇元素樣式有偽類,你可以任意觸發它的偽類樣式
![【譯】12個Chrome DevTools小技巧](https://i.iter01.com/images/2a2e409a545818ba72622c1410e6a56397914353459686241d318e7d0a1afe2d.png)
5.改變樣式並儲存
在Elemetns
皮膚的Styles
皮膚中,你可以對選擇的元素樣式進行修改,然後點選檔名,進行儲存
操作
這個技巧不適用於使用了+
選擇器和element.style
樣式內容
![【譯】12個Chrome DevTools小技巧](https://i.iter01.com/images/ff91cbd5e9324156a0d75b95186c8bf4308cdf3855c81381b0f77c60f360ae2e.gif)
6.為選中的元素截圖
在Elements
標籤中,選擇一個元素,按下cmd-shift-p
(windows
則為ctrl-shift-p
)組合鍵,搜尋並選擇Capture node screenshot
進行儲存操作
![【譯】12個Chrome DevTools小技巧](https://i.iter01.com/images/544069be49d0125745bbd2c532257608f77266eedf11677c21f722336793d1b5.gif)
7.使用CSS選擇器查詢元素
在Elements
皮膚中,按下cmd-f
(windows
則為ctrl-p
)組合鍵,顯示查詢框
你可以輸入字串
去在整個頁面查詢,或者輸入css
選擇器去查詢
![【譯】12個Chrome DevTools小技巧](https://i.iter01.com/images/1cbc6ec035ef3f7363071a3840aa5acbe296f870391ee8596fb297f2eb9319a5.gif)
8.Console
的程式碼換行
在Console
皮膚中除錯多行程式碼時,使用shift-enter
組合鍵進行換行,enter
鍵將直接執行程式碼
![【譯】12個Chrome DevTools小技巧](https://i.iter01.com/images/78cf37b3c6a560a14bbda6e4fc6dee07af8e580216ab01b7cf95eaa9be306f80.gif)
9.定位
在偵錯程式皮膚中:
cmd-o
(windows
則為ctrl-o
)組合鍵,會列出當前頁面載入的資源,選擇即定位該資源cmd-shift-o
(windows
則為ctrl-shift-o
)組合鍵,會列出當前選中檔案的符號列表(屬性,方法,類等等)ctrl-g
對當前選中檔案程式碼行進行定位
![【譯】12個Chrome DevTools小技巧](https://i.iter01.com/images/c64bc4b2bff8a42e7f75d098362f76f0b96a377b7195c7ed7997b0d3a9b0470a.png)
10.監聽表示式
把需要監聽的變數新增至監聽表示式列表中
,避免在程式中反覆的console.log
同一個變數進行debug
![【譯】12個Chrome DevTools小技巧](https://i.iter01.com/images/19c4539131e06e4e77af0f85e885216118eb2aa43203137a888618c413c869ed.gif)
11.XRH/Fetch
除錯
找到並開啟XHR/Fetch Breakpoints
皮膚,新增需要攔截的請求url
![【譯】12個Chrome DevTools小技巧](https://i.iter01.com/images/da4415397177d1f99863f90e3efb4e89f53d74d0163906ffabb31c6501fddbc2.png)
12DOM
除錯
在Elements
皮膚中,對選中的元素右鍵
,啟用Break on -> subtree modifications
,任何改變該元素子節點內容的js
操作將會被攔截
![【譯】12個Chrome DevTools小技巧](https://i.iter01.com/images/7007530bdca63507a47095cc9ba81abfa4517a9faac3a0ef710884ad3cb2c745.png)