瀏覽器調試工具使用總結 一. console使用 console.table()，可以把對象輸出成表格的形式，直觀的觀察數據。 console.dir()，可以直觀觀察dom元素的對象形式 二. $的使用 $('selector')，獲取查詢到的第一個dom元素 $$('selector')，查找符 ...
瀏覽器調試工具使用總結
一. console使用
- console.table()，可以把對象輸出成表格的形式，直觀的觀察數據。
- console.dir()，可以直觀觀察dom元素的對象形式
二. $的使用
- $('selector')，獲取查詢到的第一個dom元素
- $$('selector')，查找符合selector的所有元素，相當於document.querySelectorAll()
- $_，獲取控制臺上一次輸出結果
- $0，獲取選中的dom元素
- $i，是一個console impoter插件，使用這個插件可以在控制臺中可以載入想要的模塊，進行快速調試。$i('moduleName')這樣使用
三. copy()
- 使用copy方法，可以複製變數到剪貼板，且為格式化的結構
- store as global variable，把一個變數變為一個臨時的全局變數。可以在控制台拿到他。
四. 非同步
- 在控制臺中還可以使用非同步，使用await
五. command菜單
- 可以使用command+shift+p呼出來
- 幾個有用命令（1）screen可以截屏,有節點截屏，和全屏截屏。（2）layout，可以調整devtools佈局方向。（3）theme，可以切換主題色。其他功能，可以自己把玩。
六. 斷點
- 對dom元素下斷點，選中dom元素直接右擊，在break on中有三種類型的斷點，1.元素被移除，2.子元素被修改，3.屬性被修改
七. 強制觸發元素狀態
- hover，visited，active，focus等狀態可以強制觸發。
- 位置在styles的:hov中
原文：https://juejin.im/post/5c09a80151882521c81168a2 這個要更詳細直觀一些，希望多多學習一些東西。
