Javascript를 사용하다보면 꼭 쓰게되는 console.log !
모던 자바스크립트 책을 둘러보다 Javascript도 디버깅을 할 수 있다는 것을 알게 되었다.
그것은 바로 'Tools for Web Developers'이다.
사용 방법을 소개하기 위해 아래와 같이 html과 script를 작성해 보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="num">0</div>
<div id="plus">+</div>
<div id="minus">-</div>
<script>
const num = document.getElementById('number');
const plus = document.getElementById('plus');
const minus = document.getElementById('minus');
let num = 0;
const render = function(){counter.innerHTML = num;}
plus.onclick = (function(){
num++;
render();
})
minus.onclick = (function(){
num--;
render();
})
</script>
</body>
</html>짠! 더하기 빼기 버튼을 눌러서 숫자가 증가 혹은 감소되는 페이지를 구현해 보았다.
그런데 버튼을 아무리 눌러도 작동하지 않는다.
보통은 console.log를 사용해서 변수 하나하나 함수 하나하나 담아가며 체크하겠지만...!
오늘 알게된 디버깅으로 무엇이 잘못되었는지를 확인해 보려고 한다.
F12를 눌러 console창을 확인하자.
그러면 이렇게 강렬하게 어디서 무슨 오류가 났어~하고 오류를 알려준다.
여기서 오른쪽에 오류 내용을 클릭해보면,
이런 화면이 나타난다.
여기서 원하는 부분만 잡아서(좌측 빨간박스) 디버깅 실행을 통해 문제점(우측 빨간박스)을 발견할 수 있다.
순서대로 실행을 시키면서 어디서 막히는지 파악하기 쉽다
잡힌 부분에서 실행을 하기 때문에 무작정 페이지를 실행시키고 보기 보다 빠르고 확실하게 찾을 수 있어서 자주 연습하면서 내 것으로 만들면 빠르게 디버깅 할 수 있을 것 같다. 👍🏻
✨ 𝑬𝒗𝒆𝒓𝒚𝒕𝒉𝒊𝒏𝒈 𝒄𝒐𝒎𝒆𝒔 𝒕𝒐 𝒉𝒊𝒎 𝒘𝒉𝒐 𝒉𝒖𝒔𝒕𝒍𝒆𝒔 𝒘𝒉𝒊𝒍𝒆 𝒉𝒆 𝒘𝒂𝒊𝒕𝒔. ✨