자바스크립트 디버깅 하는 방법

자바스크립트 디버깅 하는 방법

웹개발 하면서 자바스크립트로 자주 사용하는 디버깅 하는 방법입니다.

window.alert 이용하는 방법이 제일 많이 사용되죠.

그런데 여러번에 걸쳐서 디버깅을 하고 싶을땐 alert 이 귀찮긴 합니다. 이런경우는 console.log 를 이용해보세요.

<script>

function action_button1(str) {

alert(str);

}

function action_button2(str) {

var debugWindow = window.open("", "_debug_", "width=200, height=100");

debugWindow.document.write(str);

}

function action_button3(str) {

var pobj = document.getElementById('debug_out');

pobj.innerHTML = str;

}

function action_button4(str) {

var pobj = document.getElementById('debug_out');

pobj.innerHTML = 'F12를 눌러서 확인하세요.';

console.log(str);

}

</script>

<div id="debug_out" style="border:1px solid red;">debug out</div>

<button onclick="action_button1('debug1 : ' + event.clientX + ', ' + event.clientY);">클릭좌표1</button>

<button onclick="action_button2('debug2 : ' + event.clientX + ', ' + event.clientY);">클릭좌표2</button>

<button onclick="action_button3('debug3 : ' + event.clientX + ', ' + event.clientY);">클릭좌표3</button>

<button onclick="action_button4('debug4 : ' + event.clientX + ', ' + event.clientY);">클릭좌표4</button>

debug out