浏览器调试工具使用总结
一. 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 这个要更详细直观一些，希望多多学习一些东西。