Chrome调试实用技巧

常用快捷键

切换调试台布局

Ctrl+ Shift+ D

调整数值

1. 增加/减少0.1：Alt+↑ Alt+↓
2. 增加/减少1：↑ ↓
3. 增加/减少10：Shift+↑ Shiift+↓
4. 增加/减少100：Ctrl+↑ Ctrl+↓

切换Tab

在Elements、console、sources等tab中切换时可以使用快捷键，默认是禁用的，在调试台的Setting中开启即可使用

快捷命令面板

Ctrl+Shift+P可以调起快捷命令行，可以设置面板tab的显示、截屏（node节点截屏/滚动截屏）、CSS Overview、标尺展示、主题切换等非常丰富的操作：

引用$

在Element中选中某个node节点，在console面板中可以使用$0引用到该节点；类似地$1、$2分别是对上一次、上上一次的节点的引用；

$_对上次输出结果的引用，可以是node节点，也可以是其他类型的数据

$i: 结合chrome插件console importer，在调试台直接可以引用很多npm包，使用如下：

数据拷贝

拷贝HTML

切换到ElementsTab页，然后直接Ctrl+ C即可复制DOM结构；当然也可以实用Edit as HTML进行编辑后复制HTML

存储为全局变量

Chrome DevTools支持右键Store as global功能，可以将一些信息保存为全局变量，命名分别为temp1/temp2等

数据拷贝

Chrome DevTools调试工具提供了一个全局函数copy()，可以拷贝任意数据 —— DOM、API数据等

copy(location)
copy(document.head)----  

此时还可以结合Store as global直接拷贝这些信息；

console调试

1. 使用console.assert(condition, errMsg)
   

2. console.table()
   使用console.table()输出数组、类数组；第二个可选参数可以用于控制展示的列；
   

3. 显示每个console的时间戳
   Ctrl+Shift+P调起命令行面板，输入show timestamps；

Elements面板

1. 通过h隐藏、显示dom
2. 拖拽可以直接移动元素位置
3. box-shadow直接在面板中调试观看效果
   
4. animation-timing-function直接编辑贝塞尔曲线观察效果；
   
   贝塞尔曲线：cubic-bezier(p1, p2, p3, p4)，图中(p1, p2), (p3, p4)分别为上图中的两个点，（0,0）与（p1, p2）连接形成的直线及（p3, p4）与（p3, p4）连接组成的直线共同确定了贝塞尔曲线的曲率。
5. 面板中节点右击可以通过force state可以触发一些伪类状态focus/active/hover/visited；可以通过Break on对DOM树的改变加断点——子树改变、属性改变、node节点移除
6. 快速展开所有子节点 —— 右击node节点后选择Expand recursively；