TIL - 크롬 개발자 도구 이용해서 에러 디버깅

서론
오늘은 어제 문제 있었던 기존에 헤더 부분에 있었던 login.js와 common.js 파일에 있는 이벤트 리스너가 null값이어서 오류가 나는 문제를 해결했습니다.

 

콘솔창 에러

위 에러의 가장 큰 문제점은 에러가 항상 나오는 것이 아니라 페이지 이동 또는 새로고침을 하면 가끔 나오는 에러라서 명확하게 고치기 힘들었습니다.

 

문제를 해결하는 과정

1. DOMContentLoaded와 defer사용하기

document.addEventListener("DOMContentLoaded", 함수로 감싸기);
<script type="module" src="파일명.js" defer></script>

 

defer는 <script> 태그에 defer 속성을 사용하면 스크립트가 문서 파싱이 완료된 후에 실행하고 DOMContentLoaded는 HTML 문서가 완전히 로드된 후에 실행돼서 문제를 해결할 수 있다고 생각했는데 해결하지 못했습니다.

 

 

2. 헤더 렌더링 JS파일에 두 JS 파일을 만들어서 호출하기

// 공통 헤더 렌더링
async function renderHeader() {
    try {
        const response = await fetch('header.html');
        if (!response.ok) {
            throw new Error('Failed to load header content');
        }
        const data = await response.text();
        document.getElementById('header-container').innerHTML = data;
        loadScript(); // loadScript 함수 호출
    } catch (error) {
        console.error('Error rendering header:', error);
    }
}

function loadScript() {
    // Load common.js
    const scriptCommon = document.createElement('script');
    scriptCommon.src = './js/common.js';
    document.body.appendChild(scriptCommon);

    // Load login.js
    const scriptLogin = document.createElement('script');
    scriptLogin.src = './js/login.js';
    document.body.appendChild(scriptLogin);
}

renderHeader();

이때까지 문제는 헤더 렌더링에 문제가 있다고 생각해서 헤더 렌더링의 파일이 다 받은 후에 헤더 기능에 있는 파일이 헤더 데이터를 다 받은 후에 실행하면 해결될 것이라고 생각했습니다.

 

 

3. 개발자 도구 이용해서 디버깅

개발자 도구 디버깅

위 방법으로도 해결이 안 돼서 개발자 도구를 켜서 자바스크립트가 어떻게 순서가 작동되는지 확인해 봤습니다. 오류가 나는 경우는 헤더파일을 받아오고 나서 DOMContentLoaded안에 있는 함수가 실행되는 것이 문제였습니다. 현재 데이터를 헤더파일 말고 API에서 영화데이터를 받고 나서 DOMContentLoaded안에 있는 함수가 실행하니까 에러를 해결할 수 있었습니다.

 

import { fetchData } from './fetchMovieData.js';
import { renderHeader } from './headerRendering.js'



async function loginEventListeners() {
    await renderHeader();
    await fetchData();
    .....
    // 함수 내용
}

document.addEventListener("DOMContentLoaded", loginEventListeners);

renderHeader와 fetchData는 비동기적으로 받아오기 때문에 사이트의 속도에는 영향이 없고 에러는 해결되었습니다.

 

 

결론

에러를 여태껏 콘솔창의 에러 표시를 보고 에러의 종류를 보고 해결했는데 이번 에러는 항상 뜨는 코드가 아니라 어쩔 때는 에러가 났다가 안 나는 현상이 나서 당황했는데 관리자 도구의 소스탭을 이용해서 디버깅하니까 페이지에서 스크립트 실행 흐름을 알 수 있어서 디버깅하는데 편했던 것 같습니다.