為調(diào)試JavaScript添加輸出窗口的代碼
更新時(shí)間:2010年02月07日 11:14:51 作者:
調(diào)試JavaScript是一件很麻煩的事,盡管有很多很好用的調(diào)試工具,但有時(shí)候想要跟蹤值的變化,但即不想中斷腳本執(zhí)行,也不想用alert顯示值信息,這種情況下,一般的做法是在頁面上添加一個(gè)DIV或者其它元素,然后再往里面添加調(diào)試信息。
雖然不是很復(fù)雜的實(shí)現(xiàn),但每次都要這樣就會很麻煩,所以我寫了一小段腳本,用來自動(dòng)生成這個(gè)輸出窗口。
代碼
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 = "關(guān)閉";
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 = "";
}
調(diào)用方法很簡單:
Babu.Debugging.writeLine("調(diào)試信息");
Babu.Debugging.writeLine("帶參數(shù)的調(diào)試信息:參數(shù)1={0},參數(shù)2={1}", arg1, arg2);
調(diào)用之后,會自動(dòng)在窗口的右下角出現(xiàn)一個(gè)固定位置的窗口,并顯示相應(yīng)的內(nèi)容。效果圖請看下面:
代碼
復(fù)制代碼 代碼如下:
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 = "關(guān)閉";
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 = "";
}
調(diào)用方法很簡單:
復(fù)制代碼 代碼如下:
Babu.Debugging.writeLine("調(diào)試信息");
Babu.Debugging.writeLine("帶參數(shù)的調(diào)試信息:參數(shù)1={0},參數(shù)2={1}", arg1, arg2);
調(diào)用之后,會自動(dòng)在窗口的右下角出現(xiàn)一個(gè)固定位置的窗口,并顯示相應(yīng)的內(nèi)容。效果圖請看下面:

您可能感興趣的文章:
- javascript代碼調(diào)試之console.log 用法圖文詳解
- js調(diào)試工具console.log()方法查看js代碼的執(zhí)行情況
- 調(diào)試Javascript代碼(瀏覽器F12及VS中debugger關(guān)鍵字)
- 在vs2010中調(diào)試javascript代碼方法
- 分享一個(gè)自定義的console類 讓你不再糾結(jié)JS中的調(diào)試代碼的兼容
- 利用vscode調(diào)試編譯后的js代碼詳解
- 簡單實(shí)用的js調(diào)試logger組件實(shí)現(xiàn)代碼
- JavaScript代碼調(diào)試方法實(shí)例小結(jié)
相關(guān)文章
JS 邏輯判斷不要只知道用 if-else 和 switch條件判斷(小技巧)
這篇文章主要介紹了JS 邏輯判斷不要只知道用 if-else 和 switch,在一些邏輯復(fù)雜度的增加,代碼中的 if/else 和 switch 會越來越臃腫。本文將帶你嘗試寫出更優(yōu)雅的判斷邏輯,需要的朋友可以參考下2020-05-05Echarts直角坐標(biāo)系x軸y軸屬性設(shè)置整理大全
直角坐標(biāo)系的設(shè)置指的是網(wǎng)格,坐標(biāo)軸和區(qū)域縮放的配置,下面這篇文章主要給大家介紹了關(guān)于Echarts直角坐標(biāo)系x軸y軸屬性設(shè)置的相關(guān)資料,需要的朋友可以參考下2022-11-11解決layui追加或者動(dòng)態(tài)修改的表單元素“沒效果”的問題
今天小編就為大家分享一篇解決layui追加或者動(dòng)態(tài)修改的表單元素“沒效果”的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09javascript 局部頁面打印實(shí)現(xiàn)代碼
Web打印有很多方式,水晶報(bào)表使用的恐怕比較多,但這東西是收費(fèi)軟件,老板說不能用:(。2009-08-08在JavaScript中獲取請求的URL參數(shù)[正則]
在ASP.NET后臺代碼中,對于這樣的URL請求地址:http://www.abc.com?id=001,我們可以通過Request.QueryString["id"]的方法很容易的獲取到URL中請求的參數(shù)的值,但是要在前臺js代碼中獲取請求的參數(shù)的值,應(yīng)該怎么做呢?2010-12-12JavaScript折半查找(二分查找)算法原理與實(shí)現(xiàn)方法示例
這篇文章主要介紹了JavaScript折半查找(二分查找)算法原理與實(shí)現(xiàn)方法,結(jié)合具體問題描述了折半查找算法的原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-08-08基于JavaScript實(shí)現(xiàn)HarmonyOS備忘錄服務(wù)卡片
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)HarmonyOS備忘錄服務(wù)卡片,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-05-05