no_mkd

Chrome DevTools

유용한 팁

1. 테이블 뷰

console.table(arr2/obj, [arrColName]); // 객체의 속성/값 또는 다차원 배열의 키/값을 테이블 형식으로 표시합니다.

2. 타이머

console.time/timeEnd(str); // 쌍으로 나타나며 함께 사용됩니다.

3. Snippet

자신만의 디버깅 도구 라이브러리를 넣어둘 수 있어 매우 편리합니다.

4. 이미지 색상 추출

브라우저로 이미지를 열고, 요소를 검사한 후, 임의의 색상 값을 설정하고 스포이트로 색상을 추출합니다.

5. 자주 사용하는 단축키

Ctrl + Shift + f    파일 전체 검색
Ctrl + Shift + o    함수 정의 찾기
Ctrl + p            Sources 패널로 이동
Ctrl + Shift + c    요소 검사
Ctrl + L            지정된 행으로 이동
ESC                 콘솔 표시/숨기기
Ctrl + L            콘솔 비우기

0. 메인 패널

1. 자주 사용하는 기능

기기 시뮬레이션(가로/세로 전환), 터치 이벤트 시뮬레이션(기본 활성화)

2. 자주 사용하지 않는 기능

네트워크 시뮬레이션(모바일 네트워크 성능 최적화), 경위도 및 가속도 시뮬레이션, 미디어 쿼리 디버깅

2. Elements

1. 자주 사용하는 기능

위치 찾기, 임시 수정, CSS 규칙 확인, 이벤트 리스너

2. 자주 사용하지 않는 기능

DOM 중단점(하위 트리 업데이트/속성 값 업데이트/노드 제거 시 트리거, DOM 레벨 3 노드 업데이트 이벤트에 대응), 노드 드래그 앤 드롭으로 DOM 구조 수정, 요소의 hover/active 등 상태 강제 표시

3. Network

1. 네트워크 패널에서 할 수 있는 것

• 어떤 리소스가 가장 늦게 다운로드되기 시작했나요?

• 어떤 리소스의 다운로드 시간이 가장 긴가요?

• 누가 해당 네트워크 요청을 시작했나요?

• 해당 컴포넌트를 로드하는 데 얼마나 걸렸나요?

2. 자주 사용하는 기능

리소스 로드 상태 및 리소스 URL 확인, Ajax 디버깅(예: 바이두 날씨 표시 XHR), XHR 재전송

3. 자주 사용하지 않는 기능

HTTP 요청/응답 헤더 및 본문 확인, 네트워크 성능 평가(소요 시간 확인)

4. 두 개의 중요한 타임라인

파란색 선은 DOMReady 이벤트를 나타냅니다. 트리거 조건은 브라우저가 전체 HTML 문서의 DOM 구조를 파싱 완료했을 때입니다. 일반적으로 프론트엔드 개발자는 문서에서 요소를 안정적으로 찾기 위해 이 이벤트를 모니터링합니다. 이 이벤트가 트리거되기 전에는 HTML의 절반만 다운로드되어 원하는 요소가 아직 나타나지 않았을 수 있습니다.

빨간색 선은 load 이벤트를 나타내며, 트리거 조건은 페이지의 모든 JS, CSS, 이미지가 다운로드 완료되었을 때입니다. 사용자가 보는 프로그레스 바가 더 이상 "로딩 중" 상태가 아닌 상태입니다. 사용자 입장에서의 로딩 완료를 의미합니다.

5. 시간 기록 (Resource Timing API)

1. 시작

2. 리디렉션 시작

3. 리디렉션 종료

4. App Cache 가져오기 시작

5. DNS 조회 시작

6. DNS 조회 종료

7. TCP 연결 시작 (보안 포함)

8. TCP 연결 종료

9. 요청 시작

10. 응답 시작

11. 응답 종료

window.performance.getEntries()를 통해 위의 모든 데이터를 가져올 수 있으며, 페이지에서 직접 사용할 수 있습니다(console 객체와 유사).

6. 리소스 상세 정보

• Stalled/Blocking: 요청 전송 전 준비 단계, 예를 들어 TCP 연결 재사용(Chrome은 도메인당 6개의 TCP 연결을 지원합니다),

• Proxy Negotiation: 프록시 서버 연결에 소요된 시간

• DNS Lookup: DNS 조회 시간(브라우저에 DNS 기록 캐시가 없는 경우)

• Initial Connection / Connecting: 연결 초기화 시간, 예를 들어 TCP 연결 설정, SSL 연결 등

• SSL: SSL 핸드셰이크 시간

• Request Sent / Sending: 요청 전송 시간

• Waiting (TTFB): 응답(첫 번째 바이트)이 올 때까지 기다리는 시간

• Content Download / Downloading: 응답 데이터를 받는 데 소요된 시간

4. Sources

1. 자주 사용하는 기능

외부 파일 소스 코드 확인, [조건부] 중단점(코드 행 중단점/이벤트 중단점) 디버깅

2. 자주 사용하지 않는 기능

파일 수정 시 자체 버전 관리 지원, 압축된 코드 포맷팅({} 기호), 영구 스크립트 Snippet(구문 강조를 지원하는 멀티라인 콘솔), 블랙박스 스크립트(관심 없는 스크립트 파일 제외)

3. 중단점 유형

• 코드 행 중단점

• DOM 중단점 (ES5)

  • DOM 하위 트리 업데이트 중단점

  • 속성 업데이트 중단점

  • 节点移除断点

• XHR 중단점 (특정 URL의 XHR 가로채기)

• 이벤트 리스너 중단점 (특정 이벤트 모니터링)

디버깅 단축키: F8 단일 실행, F10 건너뛰기, F11 한 단계씩 실행, Shift+F11 나가기

5. Timeline 렌더링 속도 최적화

1. 기능

• 상세 시간 소요 그래프(리소스 다운로드, 스크립트 실행, 렌더링, 리페인트 등 포함)

  

  녹색 선은 "First Paint"를 나타내며, DOMContentLoaded보다 빠를 수 있습니다. Paint는 Chrome이 GPU에 화면을 그리도록 요청하는 것을 의미합니다.

  

• 메모리 누수 확인(강제 가비지 컬렉션)

  

  

• 이벤트 소요 시간 분석

  

6. Profile (성능 최적화)

1. 지표

CPU, 메모리 점유, 스크립트 실행 시간

2. 성능 최적화로 할 수 있는 것

• 페이지가 메모리를 너무 많이 차지하고 있는지 확인

• 메모리 누수 확인

• 가비지 컬렉션(GC) 작동 빈도 확인

3. 메모리 점유

그림은 빈 페이지이며, 약 2MB가 최소 메모리 점유입니다.

(V8 엔진의 GC 매커니즘은 전통적인 참조 횟수 계산/Mark-Sweep 방식이 아니라, New Generation + Old Generation + Promotion 매커니즘을 사용합니다. New Generation은 Scavenge 알고리즘(객체 트리 순회)을 사용하고, Old Generation은 Mark-Sweep + Mark-Compact 알고리즘을 사용합니다.)

Timeline 패널과 결합하여 메모리 누수를 확인하는 과정은 다소 복잡합니다. 자세한 정보는 Chrome Developer Tools 메모리 분석, [JavaScript Memory Profiling](성능 최적화/JavaScript Memory Profiling - Google Chrome.html)을 참고하세요.

또한 DOM 노드 누수도 감지할 수 있는데, 이는 메모리 누수의 일종으로 어떤 경우에는 DOM 파편이 회수되지 못하고 남을 수 있습니다.

4. JS 문장별 소요 시간 확인

7. Resources

1. 자주 사용하는 기능

쿠키(Cookie)

2. 자주 사용하지 않는 기능

localStorage, appCache, Session Storage, IndexedDB, Web SQL, Frames(DOM 객체 프레임 계층 구조, 이미지/HTML/CSS/JS 분리)

8. Audits 로딩 속도 최적화

페이지 로드 시간을 측정하고 최적화 제안을 제공합니다.

9. Console

1. 자주 사용하는 기능

계산기, JS 코드 테스트

2. 자주 사용하지 않는 기능

요소 정보 가져오기(예: 모든 이미지의 src 또는 태그 총 개수 통계), 명령줄 API(예: $, $$, $_, $x), console.assert(expr, str);는 `if (expr) {console.log(str)}`와 동일합니다.

10. Settings

JS 비활성화, 캐시 비활성화

11. 특징적인 기능

특징적인 기능 1: 원격 디버깅

안드로이드와 PC 양방향 동기화

모바일 브라우저/네이티브 앱 디버깅 지원, 포트 포워딩 지원, 가상 호스트 이름 매핑(Virtual host mapping) 지원

준비 조건:

1. Chrome 32+

2. 안드로이드 USB 연결

3. 브라우저 디버깅은 안드로이드 4.0 이상 및 안드로이드용 Chrome 필요(PC Chrome 버전이 안드로이드 버전보다 높아야 함)

4. 앱 디버깅은 안드로이드 4.4 이상 및 WebView.setWebContentsDebuggingEnabled(true); 코드 필요

단계:

1. USB 디버깅을 활성화하고, 휴대폰에서 Chrome을 열어 디버깅이 필요한 페이지에 접속합니다.

2. PC에서 Chrome을 열어 chrome://inspect에 접속한 후 'Discover USB devices'를 체크합니다.

3. 장치 목록에서 'inspect'를 클릭하여 원격 디버깅을 시작합니다.

【화웨이 4.2.2 안드로이드 Chrome 39, 42, PC Chrome 43에서 브라우저 원격 디버깅 테스트 실패, 장치를 감지하지 못함】

특징적인 기능 2: CSS 전처리기

SASS(SCSS), LESS, Stylus

1. Ruby 설치 후 gem으로 sass 또는 compass 설치

   gem sources --remove https://rubygems.org/

   gem sources -a https://ruby.taobao.org/

   gem sources -l

   gem install sass

   gem install compass

2. Source map 활성화

3. SASS 컴파일(Transpile) 후 디버깅 시작

   sass --watch --scss --sourcemap style.scss:style.css

【주의: watch 효율이 매우 낮아, 변경 사항을 감지하고 맵을 다시 생성하는 데 2분 정도 소요될 수 있음】

특징적인 기능 3: 작업 영역(Workspace)

Chrome을 IDE로 사용하기

디렉터리 추가, 영구 저장, 즉석 수정, 코드 힌트, 구문 강조, 포맷팅