Chrome控制檯技巧篇

1、複製資料 copy(something) —— 可以在console皮膚使用copy方法，複製任意可拿到的資源

2、儲存為一個全域性變數 Store as global
在console皮膚的資料，可以通過右鍵 --> store as global 來將右鍵選中的資料儲存在變數中，變數按照temp1、temp2遞增

3、儲存堆疊資訊 Stack trace
可將控制檯的報錯資訊，進行儲存，生成報錯log

4、截圖技巧
在 Chrome 的除錯開啟的情況下 按下 [ Ctrl] + [Shift] + [P] / [⌘] + [Shift]+ [P]
可通過Capture full size screenshot命令進行全屏截圖
截圖 Screenshot:
Capture area screenshot 選中區域進行截圖
Capture full size screenshot 全屏截圖

5、儲存臨時指令碼
在 Sources 下找到 Snippets,可將要執行指令碼儲存在該皮膚下，需要執行時直接run即可


快捷執行方法：
開啟command menu, 輸入感嘆號即可對指令碼進行選擇並執行

6、console.table table樣式輸出

7、console.time 監測執行時間
console.time() — 開啟一個計時器
console.timeEnd() — 結束計時並且將結果在 console 中列印出來

8、Replay XHR 重新傳送請求
選中請求，右鍵 --> Replay XHR

9、console-importer外掛
在chrome中引入外掛，即可在控制檯直接測試npm包

10、快捷切換Dev tools皮膚
ctrl + [ 或者 ctrl + ]

11、快捷切換控制檯視窗展示佈局
ctrl + shift + D / ⌘ + shift + D（下右切換）

12、斷點除錯功能符說明：
（1）Resume/pause script execution 恢復或暫停指令碼執行

（2）step over next function call 跨過，遇到函式時會跳過該函式，直接執行下一步。

（3）step into next function call 跨入，遇到函式時會進入函式，執行函式內程式碼。

（4）step out of current function 跳出當前執行函式

（5）deactivate breakpoints 停用斷點