Chrome Dev Tools

打开Dev Tool

1，菜单>更多工具>开发者工具【ctrl+shrift+i】

2.快捷键F12

打开命令菜单

• ctrl+shrift+p（window）
• command+shrift+p（MAC） 

1. 切换到黑色主题

2.切换到白色主题 

 

截屏 

这三种截图方式均不会把展开的dev tool工具截图进去

• capture area screenshot  框选截图
• capture full size screenshot 截全屏 （包含滚动的位置。  基于最外层dom元素的高 也就是说HTML设置为百分百或者100vh等无法截图全屏）
• capture node screenshot 截图选中的节点
• capture screenshot 截当前屏幕 （不包含滚动）

Dev Tool的位置 dock

 

 常用的tab

查找应用在这个节点上的所有样式

搜索后点击可定位到具体位置

event listener 选中的dom绑定的事件 点击remov可移除

控制台console （ctrl+shrift+j）

1.  执行语句
2. $_返回上一条语句的执行结果
3. $0上一个选择的dom节点（$1,$2....）
4. console.log(error warn group time  table assert trace clean )
5. log级别筛选

 

 console.clear()清空控制台