一、通用
1. DevTools 面板快捷鍵
| 快捷鍵(mac) | 作用 |
|---|---|
| ? + shift + D | 切換縱橫布局 |
| ? + [ / ? + ] | 切換左/右面板 |
| ? + 1-9 | 轉(zhuǎn)到編號1-9的面板（需要打開Preferences-Appearance-Enable Ctrl + 1-9 ...) |
| ? + shift + C | 選擇元素 |
| ? + option + I | 開發(fā)者工具 |
| ? + P | Command Menu |
2. Stack trace（保存堆棧信息）
在團(tuán)隊(duì)協(xié)作中晰甚，將堆棧跟蹤的信息保存為一個文件傳輸可以降低溝通成本。操作：在堆棧信息右鍵-Save as...
3. copy
全局方法 copy() 能拿到能在控制臺打印的任何資源决帖。
4. 遞增/遞減
在調(diào)整樣式時厕九，使用一下快捷鍵可實(shí)現(xiàn)數(shù)值的遞增遞減。
5. 使用 Command
類似 Visual Studio Code 地回，Chrome DevTools 也是使用了? + Shift+ P來打開命令面板扁远。
實(shí)例：
- 執(zhí)行
Capture node screenshot進(jìn)行節(jié)點(diǎn)截圖; - 執(zhí)行
Capture full size screenshot進(jìn)行滾動截圖; - 執(zhí)行
Switch to dark theme切換黑暗主題；
6. 代碼塊
新建
打開 Sources - Snippets刻像，點(diǎn)擊 New snippet 新建可服用的代碼畅买。
執(zhí)行
- 在
Snippets菜單右鍵運(yùn)行； - 在
Snippets菜單使用快捷鍵? + Enter; - 打開
Command Menu ``（? + P）绎速，輸入! + [代碼塊命名]運(yùn)行皮获；
二、console
1. $符
| 變量 | 引用 |
|---|---|
| $ | document.querySelector |
| $$ | 執(zhí)行 document.QuerySelectorAll 并返回節(jié)點(diǎn)數(shù)組而非 Node list
|
| $_ | 上次結(jié)果的引用 |
| $0 | 當(dāng)前 html 節(jié)點(diǎn) |
| $[1-4] | 上[1-4]選擇節(jié)點(diǎn)的引用 |
| $i | 插件 Console Importer 變量纹冤，可在 console 引入npm包 |
2. 打印對象的 “BUG”
console 中打印出的對象洒宝，在你打印出他內(nèi)容之前购公，是以引用的方式保存的。
3. async
console 默認(rèn)就被 async 包裹雁歌，所以可以直接使用 await宏浩。
4. Conditional breakpoints 條件斷點(diǎn)
右擊行號，選擇 Add conditional breakpoint...靠瞎，輸入條件比庄。如果條件成立，斷點(diǎn)就會暫停代碼的執(zhí)行乏盐。
5. console 方法
| 方法 | 說明 |
|---|---|
| console.assert | 斷言佳窑，第一個參數(shù)為假時，打印后面的參數(shù) |
| console.table | 以表格形式輸出 |
| console.dir | 打印節(jié)點(diǎn)所關(guān)聯(lián)到的真實(shí)的js對象 |
| console.time | 開啟一個計(jì)時器 |
| console.timeEnd | 結(jié)束計(jì)時并且將結(jié)果在 console 中打印出來 |
6. 給 console.log 加上樣式
如果你給打印文本加上 %c 那么 console.log 的第二個參數(shù)就變成了CSS 規(guī)則父能！
console.log('%ctest','font-size:30px;color: red;') // test
7. 實(shí)時表達(dá)式
點(diǎn)擊 console 面板“眼睛”按鈕神凑，添加實(shí)時更新的表達(dá)式。
三何吝、Network
1. Request initiator 顯示調(diào)用堆棧信息
在 Network 面板上打開 initiator 列溉委，請求發(fā)出后，將顯示完整的調(diào)用堆棧和文件爱榕。
2. 過濾請求
打開 network 面板沙漏圖標(biāo)瓣喊，在 Filter 輸入框輸入過濾規(guī)則可實(shí)現(xiàn)請求列表過濾。支持以下規(guī)則：
- 文本：png
- 正則：/.*.[cj]s+$/
- 排除：-main.css
- 域名：domain:raw.githubusercontent.com
3. 自定義請求表
在請求列表表頭右鍵可配置請求表黔酥。
4. 重新發(fā)送 XHR
在 XHR 請求右鍵 - Replay XHR 可重新發(fā)送請求藻三。
5. 復(fù)制請求
在請求右鍵 - copy 可復(fù)制請求為指定格式。
四跪者、Element
1. h 隱藏元素
選中元素趴酣，按 h 可隱藏元素。
2. 展開所有子節(jié)點(diǎn)
在元素右擊菜單中選擇 expand recursively坑夯，或者按住 option 按鍵點(diǎn)擊元素。
3. 樣式面板中的編輯器
- 插入樣式規(guī)則的按鈕
- Shadow editor 陰影編輯器
- Timing function editor 定時函數(shù)編輯器
- 顏色選擇器
五抡四、Drawer
Drawer 是一組平行的選項(xiàng)卡柜蜈，被隱藏在主窗口之下。
1. 打開 Drawer - 按 esc
2. Sensors （傳感器）
可模擬傳感器指巡。
3. Changes
查看在開發(fā)者工具中的修改內(nèi)容淑履，類似于 diff。
4. Performance monitor
性能面板藻雪，可查看 CPU 使用量秘噪，node 數(shù)量等。
5. ...
以上內(nèi)容從掘金小冊《你不知道的 Chrome 調(diào)試技巧 - dendoink》整理得出勉耀，需要了解更多細(xì)節(jié)可自行購買學(xué)習(xí)指煎。
