JavaScript_javascript 디버깅을 위한 출력 창을 추가하는 코드 팁

그다지 복잡한 구현은 아니지만 매번 이렇게 하면 번거로울 수 있으므로 이 출력 창을 자동으로 생성하기 위한 작은 스크립트를 작성했습니다.
코드

코드 복사 코드는 다음과 같습니다.

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 !== "정의되지 않음" && 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 = parsInt(index.substr(1, index.length - 2))
msg = msg.replace(array[i], 인수[색인 ]);
}
}
}
}
varspan = document.createElement("SPAN")
span.appendChild(document.createTextNode(msg) );
console._output.appendChild(span);
console._output.appendChild(document.createElement("BR"))
span.scrollIntoView(); >}
}
Babu.Debugging._getConsole = function() {
var console = Babu.Debugging._console;
if (!console) {
var div = document.createElement( "DIV" );
div.style.position = "고정";
div.style.right = "3px";
div.style.bottom = "3px"; .width = "350px";
div.style.height = "180px";
div.style.BackgroundColor = "흰색";
div.style.color = "검은색"; .style.border = "solid 2px #afafaf";
div.style.fontSize = "12px";
document.body.appendChild(div)
console = div;
div = document.createElement("DIV");
div.style.BackgroundColor = "#e0e0e0";
div.style.position = "절대"
div.style.left = "0px" ;
div.style.right = "0px";
div.style.top = "0px";
div.style.height = "16px"; padding = " 2px 2px";
div.style.margin = "0px";
console.appendChild(div);
console._toolbar =
div = document.createElement ");
div.style.overflow = "자동";
div.style.whiteSpace = "nowrap";
div.style.position = "절대";
div.style.left = "0px";
div.style.right = "0px";
div.style.top = "20px"
div.style.bottom =
div.style .height = "auto";
console.appendChild(div);
var btn;
btn .innerHTML = "축소";
btn.style.margin = "0px 3px";
btn.style.cursor = "포인터"
console._toolbar.appendChild(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 = "포인터";
console._toolbar.appendChild(btn); Babu.Debugging .clearConsole;
btn = document.createElement("SPAN");
btn.innerHTML = "닫기";
btn.style.cursor = "포인터"; .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"; _toolbar.childNodes [2].style.display = "none";
this._toolbar.childNodes[0].innerHTML = "expand";
this._collapseState = { 너비: this.style.width, 높이 : 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; Debugging.showConsole = function() {
Babu.Debugging._getConsole().style.display = "";
}
Babu.Debugging.hideConsole = function() {
var console = Babu .Debugging._console;
if (콘솔) {
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);

호출 후 창 오른쪽 하단에 고정 위치 창이 자동으로 나타나 해당 내용을 표시합니다. 아래 렌더링을 참조하세요.