▲

브라우저에서 사용하는 디버깅 기술

 (alan.norbauer.com)
5P by GN⁺ 2023-11-12 | ★ favorite | 댓글 1개

브라우저 디버거 활용 팁

  • 고급 조건부 중단점

    • 부작용을 가진 표현식을 사용하여 조건부 중단점의 기능 확장
    • 로그포인트/트레이스포인트를 통해 실행 중단 없이 콘솔에 로그 기록 가능
    • console.count를 사용하여 실행 횟수 카운트
    • 주요 브라우저들이 로그포인트/트레이스포인트를 지원함 (2020년 5월 기준)

  • 감시 창 활용

    • 감시 창에서 console.log 사용 가능
    • DOM 변화 시점에 표현식 실행을 위해 DOM 변화 중단점 설정 후 감시 표현식 추가

  • 호출 스택 추적

    • 함수 호출 스택을 추적하여 불일치하는 호출 찾기
    • console.trace를 조건부 중단점에 사용하여 호출 스택 확인

  • 프로그램 동작 변경

    • 프로그램 동작을 브라우저 내에서 즉석으로 변경 가능
    • 함수 매개변수를 오버라이드하여 동작 조정

  • 간단한 성능 프로파일링

    • 콘솔 타이밍 API를 사용하여 코드 실행 시간 측정
    • console.time('label')과 console.timeEnd('label')을 사용하여 시간 측정

  • 함수 아리티 활용

    • 특정 개수의 인자로 호출될 때만 중단점 활성화
    • 함수 호출 시 인자 수 불일치를 찾기 위해 사용

  • 시간 활용

    • 페이지 로드 후 특정 시간이 지난 후에만 중단점 활성화
    • 특정 시간 동안 중단점을 건너뛰고 그 이후에만 활성화

  • CSS 활용

    • 계산된 CSS 값에 기반하여 중단점 활성화

  • 짝수 호출만 중단

    • 짝수 번째 실행 시에만 중단점 활성화

  • 샘플링을 통한 중단

    • 실행의 무작위 샘플에 대해서만 중단점 활성화

  • 특정 줄에서 중단 금지

    • "Never Pause Here" 옵션을 사용하여 특정 줄에서 중단되지 않도록 설정

  • 자동 인스턴스 ID 부여

    • 클래스 인스턴스마다 고유 ID 자동 할당

  • 프로그래밍 방식으로 토글

    • 전역 부울을 사용하여 조건부 중단점을 프로그래밍 방식으로 토글

  • monitor() 클래스 호출

    • 클래스 메소드 호출 추적을 위해 Chrome의 monitor 명령어 사용

  • 함수 호출 및 디버깅

    • 콘솔에서 debugger 호출 후 함수를 디버깅하기 위해 호출

  • URL 변경 시 실행 중단

    • 단일 페이지 애플리케이션에서 URL 변경 전에 실행 중단

  • 속성 읽기 디버깅

    • 객체의 속성이 읽힐 때마다 중단점 활성화

  • copy() 사용

    • copy() 콘솔 API를 사용하여 브라우저에서 직접 클립보드로 정보 복사

  • HTML/CSS 디버깅

    • JS 콘솔을 사용하여 HTML/CSS 문제 진단
    • JS 비활성화 상태에서 DOM 검사
    • 조건부로 나타나는 DOM 요소 검사
    • DOM 스냅샷 기록
    • 포커스된 요소 모니터링
    • 굵은 글씨체 요소 찾기
    • 현재 선택된 요소 참조
    • 이벤트 모니터링

GN⁺의 의견

이 글에서 가장 중요한 것은 브라우저의 디버거를 사용하여 개발자가 코드를 더 효율적으로 디버깅하고 문제를 해결할 수 있는 다양한 기술과 팁을 제공한다는 점이다. 이러한 정보는 소프트웨어 개발자에게 매우 유용하며, 특히 복잡한 버그를 추적하거나 성능 문제를 해결할 때 시간을 절약할 수 있기 때문에 흥미롭다.

▲
GN⁺ 2023-11-12  [-]
Hacker News 의견

  • 브라우저 내장 디버깅 도구의 발전

    • 브라우저 내장 디버깅 도구가 지난 수십 년간 크게 발전함.
    • 자바스크립트 경력자로서, 직관적인 브라우저 코드 디버깅을 가능하게 한 모든 이들에게 감사함.
    • 백엔드 개발이나 다른 언어로 작업할 때, 현대 브라우저의 디버깅 도구 생태계가 그리움.

  • 디버거 문장의 활용

    • 디버거 문장(debugger;)을 사용하는 것은 크롬 디버거의 재귀적인 스택을 이길 수 있는 유일한 방법임.
    • 사이트 방문자가 자신의 난독화된 홈페이지를 해석하는 것을 방지하기 위해 디버깅 함정을 사용한 사례 언급.

  • NodeJS 백엔드 디버깅의 어려움

    • Python/Elixir 프로그래머로서 pdb.set_trace()/IEx.pry()를 자주 사용함.
    • 복잡한 NodeJS 백엔드를 상속받아 적절한 디버깅 도구 없이 작업하며 어려움을 겪음.
    • console.log 디버깅으로 돌아가야 했으며, 이는 원시적인 느낌을 줌.
    • 적절한 디버깅 REPL이 없는 것에 대한 놀라움과 도움을 요청함.

  • Werkzeug 추천

    • Django 백엔드 개발에 Werkzeug 사용을 추천함.
    • 예외가 발생할 때마다 브라우저에서 "PDB" 쉘을 사용할 수 있게 해줌.

  • IIFE의 로컬 변수 접근 방법

    • 즉시 실행 함수 표현식(IIFE)의 로컬 변수에 접근하는 방법에 대한 질문.
    • 디버거가 IIFE 범위 내 코드를 중단하지 않고도 이를 수행할 수 있는 방법 탐색.

  • UI 문자열을 통한 디버깅 방법

    • 네트워크 패널에서 네트워크 요청 기록 시작.
    • 왼쪽 사이드바에서 검색을 사용하여 찾고자 하는 코드/UI 문자열 입력.
    • 번들된 js 청크 파일에서 결과를 찾고, "Sources"에서 열어 디버거 문장을 배치함.

  • 조건부 중단점을 사용한 디버깅

    • {configOption: true}를 {get configOption() { debugger; return true; }}로 변환하는 방법에 대한 질문.

  • Chrome 전용 기능인 'Monitor Events for Element'

    • 'Monitor Events for Element' 기능에 대한 언급과 Chrome 전용이라는 점.
    • Firefox에 대한 대안이 있는지에 대한 궁금증.

  • queryObjects API의 부재

    • 특정 생성자로 생성된 모든 객체의 목록을 반환하는 queryObjects API에 대한 언급.
    • 예를 들어, queryObjects(Function)을 사용하여 힙에 있는 모든 함수의 목록을 얻을 수 있음.

  • 관찰 변수의 사용 어려움

    • 관찰 변수를 작동시키는 것이 어려움을 겪음.
    • 전역 변수만 관찰할 수 있다고 가정하지만, 예상대로 작동하지 않아 로그에 값을 채움.
    • 콘솔이 변수 및 설정 값을 보고 테스트할 수 있는 Data.gui 스타일 UI를 추가해야 한다는 의견과 관련 CodePen 링크 제공.
답변달기