학습 내용 정리/기본

크롬의 개발자 도구, 디버깅

verdantjuly 2023. 5. 16. 22:34
728x90

 

- 각 패널들의 명칭과 기능

Elements : DOM CSS를 편집하여 렌더링된 뷰 > 편집한 내용이 저장되지는 않는다.

Console : 웹페이지의 에러, console.log

Sources : 자바스크립트 코드 디버깅

Network : 네트워크 요청 정보와 성능

Application : 웹 스토리지, 세션, 쿠키 확인 및 관리

 

- 개발자 도구 창 분리 : 우측의 더보기 ... 클릭 > Dock Side

- 디버깅

예시 코드

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Counter</title>
</head>

<body>
    <div id="counter">0</div>
    <button id="increase">+</button>
    <button id="decrease">-</button>
    <script>
        const $counter = document.getElementById('counter-x');
        const $increase = document.getElementById('increase');
        const $decrease = document.getElementById('decrease');

        let num = 0;
        const render = function () { $counter.innerHTML = num; };

        $increase.onclick = function () {
            num++;
            console.log('increase 버튼 클릭', num);
            render();
        };

        $decrease.onclick = function () {
            num--;
            console.log('decrease 버튼 클릭', num);
            render();
        };
    </script>
</body>

</html>

 

에러가 발생한다!

오른쪽 끝에 index.html:19 와 같은 에러 발생 위치를 클릭

> Sources 패널로 자동 이동, 디버깅 가능!

line 19 의 라인 번호를 클릭해 책갈피 모양이 뜨면 브레이크 포인트가 걸린 것이다.

이 때 오류를 실행하면 디버깅 모드로 들어간다.

마우스 커서를 원하는 곳에 올리면 변수의 값을 알 수 있다. 

현재 $counter는 null 값을 갖고 있다. 

 

이렇게 에러 메시지를 확인하고 에러가 발생한 원인을 제거하는 것을 디버깅이라고 한다. 

 

 

 

<모던 자바스크립트 딥 다이브>에서 발췌.