錄了段講解視訊，放b站了
https://www.bilibili.com/vide...
視訊比文章更清楚詳細
1，開啟方式
- F12
- ctrl shift i（command option i）
- 滑鼠右鍵 -> 檢查（inspect）
- 右上角更多按鈕（三個點）-> 更多工具 -> 開發者工具
2，放大縮小
- ctrl 滑鼠滾輪
- ctrl +/-，
重置 ctrl 0,
mac Command +/- ， 重置 command 0
3,皮膚(panel)
皮膚常用的有element(左邊dom,右邊樣式)，console（一般用下面那個drawer），source（打斷點），network，application(本地儲存，localstorage、 sessionstorage、cookie)
開啟/關閉console drawer
- esc
- 右上角的更多按鈕（三個點）裡的'open console drawer'/‘hide console drawer’
檢查元素
切換裝置（pc和移動端）（移動端：responsive、custom）
切換語言：設定 -> language，
或者：設定 ->restore defaults and reload（恢復預設值並重新載入）（會把所有的設定項都重置）
禁用javascript：設定 -> disable javascript
更多：
位置、
hide/show console drawer
search (搜尋網站資源 （soucre皮膚裡的）)
// 其他幾個皮膚的search element、network
// filter console、network
run command
// 一些內建命令，比如 capture fullsize screenshot（整個頁面截圖）， capture node screenshot(先在elements皮膚選中一個節點，然後再執行這個命令，可以截圖選中的節點)
// elements皮膚選中一個節點，按滑鼠右鍵，也有一個capture node screenshot，這個更方便
// 截圖要注意有滾動條的情況，下次講elements皮膚的時候講
