为调试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 相关文章推荐
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
JQuery球队选择实例
May 18 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
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中foreach循环中使用引用要注意的地方
2011/01/02 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
php 实现进制相互转换
2016/04/07 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
node.js require() 源码解读
2015/12/13 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python编程实现正则删除命令功能
2017/08/30 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
python3 xpath和requests应用详解
2020/03/06 Python
启动一个线程是用run()还是start()
2016/12/25 面试题
幼儿园五一活动方案
2014/02/07 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
股票投资建议书
2014/05/19 职场文书
失职检讨书大全
2015/01/26 职场文书
童年读书笔记
2015/06/26 职场文书
担保书怎么写 ?
2019/04/22 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
JS封装cavans多种滤镜组件
2022/02/15 Javascript