79. 자바스크립트 DevTools 심화 (Advanced DevTools Usage)

DevTools 심화 (Advanced DevTools Usage)

브라우저의 DevTools는 단순한 디버깅을 넘어 코드 분석, 성능 최적화, 네트워크 모니터링까지 가능한 강력한 도구다. 자바스크립트 개발에서 DevTools를 깊이 활용하면 문제를 빠르게 파악하고 해결할 수 있다. 이번에는 DevTools의 기본 기능부터 심화된 활용까지 자세히 풀어보려고 한다.

DevTools를 잘 다루면 개발 흐름이 한결 매끄러워진다. 하나씩 단계별로 살펴보자.

DevTools란 무엇인가

DevTools는 Chrome, Firefox, Edge 같은 현대 브라우저에 내장된 개발자 도구다. 콘솔 로그 출력부터 DOM 조작, 성능 프로파일링까지 다양한 기능을 제공한다. 기본적으로 F12나 오른쪽 클릭 후 "검사"로 열 수 있다:

console.log("DevTools 열기");

이 간단한 로그도 DevTools 콘솔에서 바로 확인할 수 있다. 이제부터 더 깊이 들어가 보자.

1. 콘솔로 코드 디버깅

콘솔은 단순 로그를 넘어 변수 상태를 확인하거나 즉석에서 코드를 실행할 수 있다:

let count = 0;
function increment() {
    count += 1;
    console.log("현재 값:", count);
}

increment();
increment();
// 콘솔에서 직접 입력
count // 2
count = 10;
increment();
// "현재 값: 11"

콘솔에서 변수 값을 확인하고 수정하며 함수를 호출해보았다. 실시간으로 변화를 볼 수 있다.

2. 소스 탭으로 브레이크포인트 설정

소스 탭에서 브레이크포인트를 설정하면 코드 실행을 멈추고 상태를 분석할 수 있다:

function calculateSum(n) {
    let sum = 0;
    for (let i = 0; i < n; i++) {
        sum += i;
    }
    return sum;
}

console.log(calculateSum(5));

DevTools에서 소스 탭을 열고, sum += i 줄에 브레이크포인트를 추가한다. 코드를 실행하면 해당 줄에서 멈추고, 변수 sum과 i의 값을 실시간으로 확인할 수 있다.

3. 네트워크 탭으로 요청 분석

네트워크 탭은 API 호출이나 리소스 로딩 상태를 확인하는 데 유용하다:

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json())
    .then(data => console.log(data.title));

네트워크 탭에서 요청 상태(200 OK), 응답 시간, 헤더, 반환된 JSON 데이터를 모두 볼 수 있다. 느린 요청을 찾아 최적화 포인트를 잡아내는 데도 활용된다.

4. 성능 탭으로 병목 지점 찾기

성능 탭은 코드 실행 속도를 분석한다:

function heavyTask() {
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
        result += i;
    }
    console.log(result);
}

heavyTask();

성능 탭에서 "Record"를 누르고 실행하면, 함수 호출 시간과 CPU 사용량을 그래프로 확인할 수 있다. 긴 실행 시간을 줄일 방법을 고민해볼 수 있다.

5. 요소 탭으로 DOM 조작

요소 탭은 HTML 구조와 스타일을 실시간으로 수정할 수 있다:

<div id="box" style="width: 100px; height: 100px; background: red;"></div>

<script>
    const box = document.getElementById("box");
    box.style.backgroundColor = "blue";
</script>

요소 탭에서 #box를 선택하고, 스타일 패널에서 색상을 변경하거나 속성을 추가해보면 실시간으로 반영된다.

6. 메모리 탭으로 누수 탐지

메모리 탭은 메모리 사용량과 누수를 분석한다:

function leakMemory() {
    let arr = [];
    for (let i = 0; i < 100000; i++) {
        arr.push(new Array(1000));
    }
    // arr이 참조 해제되지 않음
}

leakMemory();

메모리 탭에서 힙 스냅샷을 찍으면, arr이 메모리를 계속 잡고 있는 것을 확인할 수 있다. 참조를 해제하는 방법을 찾는 데 유용하다.

7. 애플리케이션 탭으로 저장소 관리

애플리케이션 탭은 로컬 스토리지, 세션 스토리지, 쿠키를 확인하고 수정할 수 있다:

localStorage.setItem("user", "홍길동");
sessionStorage.setItem("temp", "임시 데이터");
document.cookie = "id=123; expires=Fri, 31 Dec 2025 23:59:59 GMT";

console.log(localStorage.getItem("user"));

애플리케이션 탭에서 저장된 값을 보고, 필요하면 직접 삭제하거나 수정할 수 있다.

8. 커서와 명령어 팔레트 활용

DevTools의 숨겨진 기능 중 하나는 명령어 팔레트다. Ctrl+Shift+P(또는 Cmd+Shift+P)를 누르면 열린다:

// 콘솔에서 실행
console.time("loop");
for (let i = 0; i < 100000; i++) {}
console.timeEnd("loop");

명령어 팔레트에서 "Show Performance"를 입력해 성능 탭으로 바로 이동하거나, "Disable JavaScript"로 JS를 비활성화해볼 수 있다.

9. 사용자 정의 스니펫 추가

소스 탭의 Snippets로 자주 쓰는 코드를 저장하고 실행할 수 있다:

// Snippets에 저장
function logAllElements() {
    document.querySelectorAll("*").forEach(el => {
        console.log(el.tagName);
    });
}

logAllElements();

Snippets에 추가한 후, 페이지에서 실행하면 모든 요소의 태그 이름을 출력한다.

10. 반응형 디자인 테스트

DevTools의 장치 도구 모음으로 다양한 화면 크기를 시뮬레이션할 수 있다:

<style>
    @media (max-width: 600px) {
        .container { font-size: 14px; }
    }
</style>

<div class="container">테스트</div>

장치 도구 모음에서 "iPhone X"나 "iPad"를 선택하면, 미디어 쿼리가 적용된 모습을 바로 확인할 수 있다.

11. 성능과 생산성에 미치는 영향

DevTools가 개발에 어떤 영향을 주는지 보자:

- 성능: 병목 지점을 찾아 최적화하면 페이지 로딩 속도가 빨라진다.

- 생산성: 실시간 디버깅과 분석으로 문제 해결 시간이 단축된다.

브레이크포인트와 성능 분석으로 코드 흐름을 깊이 이해하는 점이 핵심이다.

마무리

DevTools는 단순한 도구를 넘어 개발의 모든 단계를 지원한다. 콘솔, 소스, 네트워크, 성능, 메모리 등 다양한 탭을 활용하면 코드의 품질과 효율성을 크게 높일 수 있다.