Javascript的调试方法 原

本人是PHP程序员一枚，对前端的JS只是略知一二。由于目前工作需要，需要写一些JS代码。在写这些代码的过程中我发现调试JS真是一个大麻烦。每次都需要用alert输出。当时就在想是否有一个可视化的工具来调试JavaScript代码呢？以前这个事情只是在脑袋中想想而已，但是今天我觉得花些时间将这个问题给解决掉。果然，功夫不负有心人。被我找到了一种调试方法。

Console(控制台)

很早以前就知道使用firbug来调试页面。也见过控制台几次。但就是没仔细弄明白这个控制台是干啥用的。

Console是用来当前页面的一些信息，比喻那些资源找不到。另外一个大的功能是用来显示js通过console这个对象输出的内容的。通过百度，控制台的比较专业的定义大概如下：

Console是用于显示JS和DOM对象信息的单独窗口，并且JS中注入了一个console对象，使用该对象可以输出信息到Console窗口中。

有了上面的了解，我们大概就了解了。我们在JS代码中调用console对象，然后输出一些内容到console对象，我们就可以直接在浏览器的控制台窗口看到信息了。这就是使用console调试js代码的原理。

如何使用

console是一个全局对象就像document一样，直接使用它的方法就行了。console对象常用的方法有两个.一个是log.一个是table。另外还有两个time和timeEnd。使用者两个函数可以统计代码执行的时间。下面详细的说一下log。

var test="ZMAX99.com";

console.log(test); //向控制台输出test变量。

当脚本执行的时候，你就会在控制台中看到下面的界面。

上图中还明确指出当前网页请求一个CSS文件没有找到。

这个console.log(obj);除了可以显示字符串以外，还可以显示对象的信息。

var obj={};

obj.name="zmax99";

obj.url="joomlachina.cn"

console.log(obj);

代码执行结果如下：

看到了吧。使用console比使用alert好处那真是大大大的。有了console，调试js将会轻松很多。

console.table()方法和log差不多。只是他讲输出的样式变了一下。变成了一个表。如下图

这个功能在调试json字符串的时候将会非常有用。

最后我们谈一下我个人比较喜欢用的函数。console.time("zmax");console.timeEnd("zmax");这两个函数配合在一起就可以计算出一段代码的执行时间了。非常的方便，

var obj={};

console.time("zmax");

obj.name="zmax99";

obj.url="joomlachina.cn"

console.table(obj);

console.timeEnd("zmax");