javascript简单的调试技巧

1、debugger

在你的js代码中，添加debugger; 则当代码执行到这一行的时候，会自动停下，对于调试js来说是比较方便的，这意味着你不必浏览器打开并等待其执行完一遍以后，才在 开发者工具页面的source出，为代码打断点。

2、console.table()

json是常作为前后台交互的一种数据格式，当json中的信息比较复杂（如对象内还嵌套了其他的对象的时候），直接使用console.log()进行打印输出，似乎不是那么的直观，这个时候就可以使用console.table()。

这个方法可以将json格式的内容，转化为表格的形式，这样也便于查看，例如有如下一段代码：

<script type="text/javascript">
var obj = {
"name":"mike",
"age":18,
"school":"a",
"grade":{
"math":"88",
"english":"90"
}
}
console.table(obj);
</script>

输出的结果（有的浏览器可能不支持这样的打印），在火狐浏览器上，


得到的记过如上。

3、console.time() & console.timeEnd()

当实现的功能已经可以满足基本的需求，而性能方面的结果还不尽如人意，就需要知道耗时是出在哪个地方了。使用 console.time() 与 console.timeEnd() 这2个函数，可以打印出期间的代码执行耗时情况。

console.time("time1");
for (var i = 1000000000; i >= 0; i--) {
// 不做任何处理
}
console.timeEnd("time1");

在控制台上可以看到，执行1E次的耗时为1.8s（具体机器耗时可能不同）；

4、美化调试的信息

控制台调试信息的输出是一件十分常见的事情，有的时候，对于调试信息增加颜色样式可能更加显眼一些

console.todo=function(msg){
console.log('%c %s %s %s ','color:white;font-weight:bold;background-color:black;', '-',msg,'-');
}

console.todo("hello");

执行后在控制台
9689
可以看到如下的结果



在

console.log()

中，

%c

可以设置自定义的样式，使用的属性类似css，

%s

用来设置字符，

%i

用来设置数字

还有其他一些调试的技巧，但很多都和浏览器有关，在浏览器的开发者工具上使用。因此在此不进行赘述了。