调试
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);
调用之后，会自动在窗口的右下角出现一个固定位置的窗口，并显示相应的内容。效果图请看下面：
最后补充一点，因为
IE6
不支持
position: fixed
，因此显示的时候会乱七八糟。
摘自博客园：http://www.cnblogs.com/effun/archive/2010/02/05/jsdebugging.html
转载于:https://www.cnblogs.com/kongling/archive/2010/05/12/1733682.html
相关资源：数据结构—成绩单生成器
