錄了段視訊放在b站了
https://www.bilibili.com/vide...
視訊比文章更清楚詳細
1，編輯程式碼：
一些快捷鍵：
執行：enter
換行：shift enter
自動補全：tab
上下方向鍵：上一次輸入/下一次輸入
跳到行首/行尾：home / end
跳到段首斷尾：ctrl home / ctrl end 或者 page up / page down
2，魔術變數
$：相當於document.querySelector
$$：相當於document.querySelectorAll
$0：當前選中的DOM元素
$_ ：上一次執行的結果
copy函式：把變數複製到剪下板，複製之後 按ctrl v 可以貼上
注意：這些變數只是在控制檯裡有，開發除錯時用著方便，在js檔案裡寫 是不行的。
3，物件 是活的（第一次展開時的值）
4，console
打日誌
console.log：資訊
consolg.warn：警告
console.error：錯誤
console.trace：看函式呼叫棧
console.time
console.timeEnd
兩次呼叫時間相差1151毫秒
console.profile
console.profileEnd:記錄效能描述資訊
console.profile('test')
doSomething()
console.profileEnd('test')
function doSomething(){}然後去 More tools -> JavaScript Profiler 可以看到相關的資訊
點選右邊的檔名可以跳轉到source皮膚中程式碼所在的位置
5，工具欄
搜尋、選單欄（清除、過濾、預設級別、）
// 看視訊吧 懶得寫了
6，設定
preserve log：（重新整理頁面時）保留日誌
auto complete from history：自動補全歷史資料、
selected context only：只顯示當前執行上下文的日誌（預設不勾選，一般情況下不要勾選）
group similar messages in console：連續打的同樣的log只顯示一行
Eager Evaluation：控制檯寫表示式時，顯示預覽結果
evaluate triggers user activation：檢測觸發使用者啟用
有一些api只有在使用者有操作的時候才能呼叫，使用者沒有操作的時候，js呼叫不執行，比如window.open()、有聲視訊的自動播放；
但是控制檯在預設情況下（這個按鈕勾選了）沒有這個限制，呼叫api能正常執行。
同一段程式碼，在控制檯執行的效果與程式碼在網頁中執行的效果不一樣。
如果想讓在控制檯除錯時的效果與程式碼在網頁中執行的實際效果一致，可以把evaluate triggers user activation取消勾選。