chrom调试指南

只截取了自己经常用的一部分建议去原文看

转自：https://segmentfault.com/a/1190000011868916

https://blog.csdn.net/itpinpai/article/details/52574385

2.element

这个想必大家会经常用到，特别是切图调整样式的时候，这个我就按照图上的编号简单说一下！
一：就是页面上的元素，鼠标放到上面，在页面上会出现（二）的变化，方便查找元素！
三：点击这个箭头，然后就能在页面上快速选择元素！
四：浏览进入移动端适配模式，如下图。可以更换各种机型，或者点击‘Edit’添加其他机型或者自定义机型！旁边的‘Online’就是模拟网络的各种情况，‘Online’旁边的图标就是横竖屏切换！这里简单提一下，大家按需使用！
online

五：被选择元素的所有的涉及样式，页面的样式可以在这里随意的修改！
六：被选择元素所有计算后的样式（有些样式会重复，覆盖，在这里就显示覆盖后的样式）以及盒模型！
七：被选择元素的事件（这个貌似只要知道就行了，至少我没用过）

其它常用功能

1.颜色取色器

2.改变颜色显示方式

3.元素状态筛选

注意看页面的‘招商银行’

4.html布局调试

注意看页面的‘唯品会’

当然，如果大家想改变html的元素，在这里也可以随便改!这个步骤一般是在调试样式的时候会用到！

5.css3动画曲线调试

如图所示，没改变曲线一下，上面紫色的球，就会根据曲线进行运动，给开发者提供一个动画的参考，下面也会生成相关曲线的代码。这个也是做出优美的css3动画的重要一步！

3.console

console这个界面，平常开发用得非常多，调试JS代码的时候，经常需要在console输出变量或者节点。个人使用上，除了在控制面板内写jS外，用得最多的就是上图，指向的那个按钮，点击一下就清空面板。这个感觉比console.clear()更快。
下面简单说下我平常使用console的情况。

console.log

这个应该就是console使用最多的功能。很多情况都是console.log输出变量，这个方式比alert更加的好用，显示的信息更全面。比如输出一个对象和节点

alert({1:1});
console.log({1:1})
alert(document.getElementById("attribute-box"));
console.log(document.getElementById("attribute-box"))

alert

console

可能很多人会以为console.log只接收一个参数，其实不是，比如带样式的输出

相信很多人都知道用console.log。但是console.info,console.warn,console.error , 这个三个大家就不是很常用，下面简单演示下！

console.log('这是普通信息！');
console.info('这是普通信息！');
console.warn('这是警告信息！');
console.error('这是错误信息！');

PS：这个版本有点奇怪，之前console.info这个api在前面是有一个蓝色的标志的，我现在用的这个版本和console.log的表现完全一样

console.time和console.timeEnd

console.time和console.timeEnd是用的第二多的api主要是检测，一段代码的执行时间

console.time();
for(let i=0;i<10000;i++){
    
}
console.timeEnd();

console.table

console.table平常使用主要就是更直观的显示对象或者数组

let arr=[
    {a:1,b:2,c:3},
{a:1,b:4,c:3},
{a:3,b:2,c:3},
{a:4,b:2,c:3},
{a:1,b:5,c:3},
{a:1,b:9,c:3},
{a:1,b:2,c:7}
];
console.table(arr)

let arr1=[1,2,3,4,5]
console.table(arr1)

let obj2={a:1,b:2,c:3}
console.table(obj2)

console.count

console.count用法有点抽象，不知道怎么说，看图吧！看了就懂了！就是在调试代码的时候，判断一个函数的执行次数，使用场景不多不少吧！

console.assert

console.assert接收两个参数，第一个参数为判断条件，第二个参数是提示信息，当条件为false时，提示错误信息！

console.group和console.groupEnd

console.group和console.groupEnd也是更直观显示数据，但是使用场景感觉并不是很多。我也是知道，但是在开发上没用过！

console.group("1");
console.log("1模块的信息 11111111...");
console.log("1模块的信息 11111111...");
console.log("1模块的信息 11111111...");
console.groupEnd();
console.group("2");
console.log("2模块的信息 22222222...");
console.log("2模块的信息 22222222...");
console.groupEnd();