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

> Clean Markdown view of GeekNews topic #11799. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=11799](https://news.hada.io/topic?id=11799)
- GeekNews Markdown: [https://news.hada.io/topic/11799.md](https://news.hada.io/topic/11799.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2023-11-12T09:43:08+09:00
- Updated: 2023-11-12T09:43:08+09:00
- Original source: [alan.norbauer.com](https://alan.norbauer.com/articles/browser-debugging-tricks)
- Points: 5
- Comments: 1

## Topic Body

### 브라우저 디버거 활용 팁

- **고급 조건부 중단점**
  - 부작용을 가진 표현식을 사용하여 조건부 중단점의 기능 확장
  - 로그포인트/트레이스포인트를 통해 실행 중단 없이 콘솔에 로그 기록 가능
  - `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⁺의 의견
이 글에서 가장 중요한 것은 브라우저의 디버거를 사용하여 개발자가 코드를 더 효율적으로 디버깅하고 문제를 해결할 수 있는 다양한 기술과 팁을 제공한다는 점이다. 이러한 정보는 소프트웨어 개발자에게 매우 유용하며, 특히 복잡한 버그를 추적하거나 성능 문제를 해결할 때 시간을 절약할 수 있기 때문에 흥미롭다.

## Comments



### Comment 20513

- Author: neo
- Created: 2023-11-12T09:43:08+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=38226743) 
- 브라우저 내장 디버깅 도구의 발전
  - 브라우저 내장 디버깅 도구가 지난 수십 년간 크게 발전함.
  - 자바스크립트 경력자로서, 직관적인 브라우저 코드 디버깅을 가능하게 한 모든 이들에게 감사함.
  - 백엔드 개발이나 다른 언어로 작업할 때, 현대 브라우저의 디버깅 도구 생태계가 그리움.

- 디버거 문장의 활용
  - 디버거 문장(`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 링크 제공.