调试神器debugger和console总结

一、打开和进入调试

①打开debugger调试

无论是web网页（F12）还是微信开发者工具里面，调试都是在source面板

②在需要打断点的地方打上标签，如图 39 、47

③F5刷新，重新执行，进入断点。如果没有进入断点，说明这个断点不是运行时触发或者需要点击等其他事件触发。

二、调试工具说明

①进入下个断点

，快捷键F8，如果有多个断点，点击时可以直接进入下个断点，忽略断点内部所有逻辑。

②忽略代码内部实现，进入下个方法

，快捷键 F10，不关注方法内部逻辑，点击直接跳到当前断点的下个方法

③单步调试，逐行执行

，快捷键F11，按照代码顺序，从上到下，一行一行执行

④跳出当前函数内部，执行下一步

，快捷键shift+F11

再总结一下console吧,也是方便调试
1、输出信息

console.log(‘消息内容！’); //输出普通信息
　　console.info(‘消息内容！’); //输出提示信息
　　console.error(‘消息内容！’);//输出错误信息
　　console.warn(‘消息内容！’); //输出警告信息

2、数据表格化

var thisObj = [
　　　　{ name: ‘quber’, email: ‘[email protected]’, qq: 757200834 },
　　　　{ name: ‘xm’, email: ‘[email protected]’, qq: 757200833 },
　　　　{ name: ‘jack’, email: ‘[email protected]’, qq: 757200832 },
　　　　{ name: ‘maer’, email: ‘[email protected]’, qq: 757200831 }
　　];
　　console.table(thisObj);

3、统计代码执行时间

console.time(‘统计时间’);

var count = 0;
　　for (var i = 0; i < 999999999; i++) {
　　　　count++;
　　}

console.timeEnd(‘统计时间’);

4、分组输出信息

console.group(‘分组1’);
　　console.log(‘分组1-1111’);
　　console.log(‘分组1-2222’);
　　console.log(‘分组1-3333’);
　　console.groupEnd();

console.group(‘分组2’);
　　console.log(‘分组2-1111’);
　　console.log(‘分组2-2222’);
　　console.log(‘分组2-3333’);
　　console.groupEnd();

5、统计代码执行的次数

function testFn() {
　　　　console.count(‘当前执行的次数’);
　　}
　　testFn();
　　testFn();
　　testFn();

6、当表达式为false时，输出信息

var testObj = false;
　　console.assert(testObj, ‘当testObj为false时才输出！’);

7、将对象以树状结构展现

var thisObj = {
　　　　name: ‘quber’,
　　　　age: 26,
　　　　fn: function() {
　　　　　　alert(‘quber’);
　　　　}
　　};
　　console.dir(thisObj);

8、展现网页某个节点所包含的所有html/xml代码

console.dirxml($(’.kx-frm-gd’));

9、占位符

console.log("%d年%d月%d日", 2016, 8, 22);//console支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）