자바스크립트 디버깅 하는 방법
자바스크립트 디버깅 하는 방법
웹개발 하면서 자바스크립트로 자주 사용하는 디버깅 하는 방법입니다.
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>