当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 为调试JavaScript添加输出窗口的代码

Javascript
javascript options属性集合操作代码
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
javascript 显示当前系统时间代码
firefox和IE系列的相关区别整理 以备后用
extJs 常用到的增,删,改,查操作代码
Javascript 面向对象特性
JavaScript的public、private和privileged模式
通过javascript设置css属性的代码
javascript iframe编程相关代码
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
js DOM模型操作
js 学习笔记(三)
用js做一个小游戏平台 (一)
jquery UI 1.72 之datepicker
jQuery的三种$()
JavaScript 常用函数
用javascript实现源代码的隐藏与解密的方法
javascript Onunload与Onbeforeunload使用小结
Javascript的闭包
JavaScript 对Cookie 操作的封装小结

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-02-27   浏览: 73 ::
收藏到网摘: n/a

调试JavaScript是一件很麻烦的事,尽管有很多很好用的调试工具,但有时候想要跟踪值的变化,但即不想中断脚本执行,也不想用alert显示值信息,这种情况下,一般的做法是在页面上添加一个DIV或者其它元素,然后再往里面添加调试信息。 虽然不是很复杂的实现,但每次都要这样就会很麻烦,所以我写了一小段脚本,用来自动生成这个输出窗口。
代码
复制代码 代码如下:

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);

调用之后,会自动在窗口的右下角出现一个固定位置的窗口,并显示相应的内容。效果图请看下面: