方便使用 CMSPAD Console 对JavaScript脚本进行跟踪调试

最近在网站中瞎逛，突然发现了 BlackBird 这个东西，号称放弃 alert() 函数进行调试，进去看了一下，思路确实很不错，于是乎就考虑整合到 CMSPAD 中...

 

经过3个小时的研究加开发，终于把 BlackBird 整合进来了（俺不熟悉CSS，所以这部分照搬BlackBird的样式），不过由于大部分JavaScript代码都是重新开发的，故取名为 CMSPAD Console（JS名称为 cmspad.console），增加了不少功能，稍后再侃，先看看它怎么用吧。

 

1. 在CMSPAD的配置文件中增加一个常量用于确定使用 cmspad.console 包。

<?php // kernel/config.php
...
define('CMSPAD_DEBUG_CONSOLE', true);
...
?>

2. 在前台模板中直接使用 cmspad.console 包即可。

<{include "header"}>
<script>
var log = cmspad.console;
log.profile("test profile");
log.info("Hello World");
log.profile("test profile");
fdfdfdf; // 这里故意搞出个错误，看看它是否能捕获到。
</script>
<button type="button" onclick="cmspad.console.toggle()">打开/关闭调试窗口</button>
<{include "footer"}>

3. 在浏览器中打开该页面，会出现以下界面

IE界面

FF界面

那么大家好问了，cmspad.console 到底改进了哪些功能呢？

 

1. 增加了多语言支持，看到图图了没有？是全中文的。

2. 增加捕获所有未知异常的功能，“fdfdfdf”那个就是。

3. 为了兼容傲游（Maxthon），快捷键使用F9。

4. 内部代码使用现有的CMSPAD框架，简化了不少代码。

5. 自动加载相关CSS文件和图片，不用在代码中指定。

6. 可以使用 CMSPAD_DEBUG_CONSOLE 常量指定是否需要进行页面调试，如果没有指定该常量或者值为false，则系统会自动生成一个空的 cmspad.console 包，不输出任何内容，这样在网站正式发布时就不会让用户看到很多可怕的信息了。

 

从此以后，在CMSPAD下调试前台脚本就方便很多了。HOHO....

 

CMSPAD 项目地址：http://code.google.com/p/cmspad

Console 演示地址：http://www.cmspad.com/examples/console 

评论

3 楼 yipsilon 2008-10-20  

jzshmyt 写道

创意无限，简单实用 javascript-logger 本人自己写的javascript日志工具，大家不妨去看看. GoogleCode:http://code.google.com/p/dewind/ Download:http://dewind.googlecode.com/files/beta-20081017.rar 

你挺强呀，有演示网站么？偶看看去~...

2 楼 jzshmyt 2008-10-18  

创意无限，简单实用 javascript-logger
本人自己写的javascript日志工具，大家不妨去看看.
GoogleCode:http://code.google.com/p/dewind/
Download:http://dewind.googlecode.com/files/beta-20081017.rar

1 楼 ionwing 2008-10-18  

这次这个贡献我很是喜欢