为调试JavaScript添加输出窗口的代码


Posted in Javascript onFebruary 07, 2010

虽然不是很复杂的实现,但每次都要这样就会很麻烦,所以我写了一小段脚本,用来自动生成这个输出窗口。
代码

window.Babu = {}; 
Babu.Debugging = {}; 
Babu.Debugging.writeLine = function(format, arg1, arg2) { 
var console = Babu.Debugging._getConsole(); 
if (console.get_visible()) { 
var msg = format; 
if (typeof msg !== "undefined" && msg !== null) { 
var index; 
if (typeof msg === "string") { 
var array = format.match(/\{(\d+)\}/g); 
if (array) { 
for (var i = 0; i < array.length; i++) { 
index = array[i]; 
index = parseInt(index.substr(1, index.length - 2)) + 1; 
msg = msg.replace(array[i], arguments[index]); 
} 
} 
} 
} 
var span = document.createElement("SPAN"); 
span.appendChild(document.createTextNode(msg)); 
console._output.appendChild(span); 
console._output.appendChild(document.createElement("BR")); 
span.scrollIntoView(); 
return span; 
} 
} 
Babu.Debugging._getConsole = function() { 
var console = Babu.Debugging._console; 
if (!console) { 
var div = document.createElement("DIV"); 
div.style.position = "fixed"; 
div.style.right = "3px"; 
div.style.bottom = "3px"; 
div.style.width = "350px"; 
div.style.height = "180px"; 
div.style.backgroundColor = "white"; 
div.style.color = "black"; 
div.style.border = "solid 2px #afafaf"; 
div.style.fontSize = "12px"; 
document.body.appendChild(div); 
Babu.Debugging._console = console = div; 
div = document.createElement("DIV"); 
div.style.backgroundColor = "#e0e0e0"; 
div.style.position = "absolute"; 
div.style.left = "0px"; 
div.style.right = "0px"; 
div.style.top = "0px"; 
div.style.height = "16px"; 
div.style.padding = "2px 2px"; 
div.style.margin = "0px"; 
console.appendChild(div); 
console._toolbar = div; 
div = document.createElement("DIV"); 
div.style.overflow = "auto"; 
div.style.whiteSpace = "nowrap"; 
div.style.position = "absolute"; 
div.style.left = "0px"; 
div.style.right = "0px"; 
div.style.top = "20px"; 
div.style.bottom = "0px"; 
div.style.height = "auto"; 
console.appendChild(div); 
console._output = div; 
var btn; 
btn = document.createElement("SPAN"); 
btn.innerHTML = "收缩"; 
btn.style.margin = "0px 3px"; 
btn.style.cursor = "pointer"; 
console._toolbar.appendChild(btn); 
btn.onclick = function() { if (console.get_collapsed()) console.expand(); else console.collapse(); } 
btn = document.createElement("SPAN"); 
btn.innerHTML = "清除"; 
btn.style.margin = "0px 3px"; 
btn.style.cursor = "pointer"; 
console._toolbar.appendChild(btn); 
btn.onclick = Babu.Debugging.clearConsole; 
btn = document.createElement("SPAN"); 
btn.innerHTML = "关闭"; 
btn.style.cursor = "pointer"; 
btn.style.margin = "0px 3px"; 
console._toolbar.appendChild(btn); 
btn.onclick = function() { Babu.Debugging.hideConsole(); } 
console.get_visible = function() { return this.style.display !== "none" }; 
console.get_collapsed = function() { return !(!this._collapseState) }; 
console.collapse = function() { 
if (!this.get_collapsed()) { 
this._output.style.display = "none"; 
this._toolbar.childNodes[1].style.display = "none"; 
this._toolbar.childNodes[2].style.display = "none"; 
this._toolbar.childNodes[0].innerHTML = "展开"; 
this._collapseState = { width: this.style.width, height: this.style.height } 
this.style.width = "30px"; 
this.style.height = "16px"; 
} 
} 
console.expand = function() { 
if (this.get_collapsed()) { 
this._output.style.display = ""; 
this._toolbar.childNodes[1].style.display = ""; 
this._toolbar.childNodes[2].style.display = ""; 
this._toolbar.childNodes[0].innerHTML = "收缩"; 
this.style.width = this._collapseState.width; 
this.style.height = this._collapseState.height; 
this._collapseState = null; 
} 
} 
} 
return console; 
} 
Babu.Debugging.showConsole = function() { 
Babu.Debugging._getConsole().style.display = ""; 
} 
Babu.Debugging.hideConsole = function() { 
var console = Babu.Debugging._console; 
if (console) { 
console.style.display = "none"; 
} 
} 
Babu.Debugging.clearConsole = function() { 
var console = Babu.Debugging._console; 
if (console) console._output.innerHTML = ""; 
}

调用方法很简单:
Babu.Debugging.writeLine("调试信息"); 
Babu.Debugging.writeLine("带参数的调试信息:参数1={0},参数2={1}", arg1, arg2);

调用之后,会自动在窗口的右下角出现一个固定位置的窗口,并显示相应的内容。效果图请看下面:
为调试JavaScript添加输出窗口的代码
Javascript 相关文章推荐
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
AngularJS执行流程详解
Feb 17 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 #Javascript
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 #Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 #Javascript
JavaScript Event学习第七章 事件属性
Feb 07 #Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 #Javascript
JavaScript Event学习第五章 高级事件注册模型
Feb 07 #Javascript
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 #Javascript
You might like
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
详解Document.Cookie
2015/12/25 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
深入学习Python中的装饰器使用
2016/06/20 Python
Python实现登陆文件验证方法
2018/10/06 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
最新大学生自我评价
2013/09/24 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
企业法人授权委托书
2014/04/03 职场文书
投资协议书范本
2014/04/21 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
合作意向协议书
2015/01/29 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
常用的Python代码调试工具总结
2021/06/23 Python
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript