本人是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");

 

 

 

 

作者: 樱木花道

Joomla程序员,从J1.5到J4.x始终都在做Joomla相关开发定制工作,有超过10年行业经验,国内Joomla扩展开发商ZMAX团队的核心成员

作者网站:ZMAX程序人

评论 (0)

  • 最新在前
  • 最佳在前