chrome浏览器调试工具你会使用吗？

浏览器调试工具使用总结

一. 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 这个要更详细直观一些，希望多多学习一些东西。