DevTools의 새로운 기능 (Chrome 74)

Kayce Basques

환영합니다. 새로운 기능을 살펴보세요.

이 페이지의 동영상 버전

CSS 속성의 영향을 받는 모든 노드 강조 표시

노드의 박스 모델에 영향을 미치는 CSS 속성(예: padding 또는 margin) 위로 마우스를 가져가면 해당 선언의 영향을 받는 모든 노드가 강조 표시됩니다.

margin 속성 위로 마우스를 가져가면 해당 선언의 영향을 받는 모든 노드가 강조 표시됩니다.

그림 1. margin 속성 위로 마우스를 가져가면 해당 선언의 영향을 받는 모든 노드의 여백이 강조 표시됩니다.

감사 패널의 Lighthouse v4

새로운 탭 타겟 크기가 적절하지 않음 감사는 버튼 및 링크와 같은 상호작용 요소가 휴대기기에서 적절한 크기와 간격을 유지하는지 확인합니다.

이제 보고서의 PWA 카테고리에서 배지 점수 시스템을 사용합니다.

PWA 카테고리의 새로운 배지 점수 시스템

그림 3. PWA 카테고리의 새로운 배지 점수 시스템

WebSocket 바이너리 메시지 뷰어

바이너리 WebSocket 메시지의 콘텐츠를 보려면 다음 단계를 따르세요.

  1. 네트워크 패널을 엽니다. 네트워크 활동 분석의 기본사항을 알아보려면 네트워크 활동 검사를 참고하세요.

    Network 패널

    그림 4. Network 패널

  2. WS를 클릭하여 WebSocket 연결이 아닌 모든 리소스를 필터링합니다.

    WS를 클릭한 후 WebSocket 연결만 표시됨

    그림 5. WS를 클릭한 후 WebSocket 연결만 표시됨

  3. WebSocket 연결의 이름을 클릭하여 검사합니다.

    WebSocket 연결 검사

    그림 6. WebSocket 연결 검사

  4. 메시지 탭을 클릭합니다.

    메시지 탭

    그림 7. 메시지 탭

  5. 바이너리 메시지 항목 중 하나를 클릭하여 검사합니다.

    바이너리 메시지 검사

    그림 8. 바이너리 메시지 검사

뷰어 하단의 드롭다운 메뉴를 사용하여 메시지를 Base64 또는 UTF-8로 변환합니다. 클립보드에 복사 클립보드로 복사를 클릭하여 바이너리 메시지를 클립보드에 복사합니다.

바이너리 메시지를 Base64로 보기

그림 9. 바이너리 메시지를 Base64로 보기

명령어 메뉴의 영역 스크린샷 캡처

영역 스크린샷을 사용하면 뷰포트의 일부 스크린샷을 캡처할 수 있습니다. 이 기능은 오래 전부터 있었지만 액세스하는 워크플로는 상당히 숨겨져 있었습니다. 이제 명령 메뉴에서 영역 스크린샷을 사용할 수 있습니다.

  1. DevTools에 포커스를 맞춘 다음 Control+Shift+P 또는 Command+Shift+P (Mac)를 눌러 명령 메뉴를 엽니다.

    명령어 메뉴

    그림 10. 명령어 메뉴

  2. area를 입력하고 영역 스크린샷 캡처를 선택한 다음 Enter 키를 누릅니다.

  3. 스크린샷을 찍으려는 뷰포트 섹션 위로 마우스를 드래그합니다.

    스크린샷을 찍을 표시 영역 부분 선택

    그림 11. 스크린샷을 찍을 표시 영역 부분 선택

네트워크 패널의 서비스 워커 필터

Network 패널 필터 텍스트 상자에 is:service-worker-initiated 또는 is:service-worker-intercepted를 입력하여 서비스 워커에 의해 발생 (initiated)했거나 잠재적으로 수정 (intercepted)된 요청을 확인합니다.

is:service-worker-initiated로 필터링

그림 12. is:service-worker-initiated 기준으로 필터링

is:service-worker-intercepted로 필터링

그림 13. is:service-worker-intercepted 기준으로 필터링

네트워크 로그 필터링에 관한 자세한 내용은 리소스 필터링을 참고하세요.

실적 패널 업데이트

이제 성능 녹화에서 긴 작업과 첫 번째 페인트를 표시합니다.

성능 패널을 사용하여 페이지 로드 성능을 분석하는 예는 기본 스레드 작업 줄이기를 참고하세요.

실적 녹화의 긴 작업

이제 성능 녹화 파일에 긴 작업이 표시됩니다.

성능 녹화에서 긴 작업 위로 마우스를 가져가기

그림 14. 성능 녹화에서 긴 작업 위로 마우스를 가져가기

타이밍 섹션의 First Paint

이제 성능 녹화의 타이밍 섹션에 First Paint가 표시됩니다.

타이밍 섹션의 First Paint

그림 15. 타이밍 섹션의 First Paint

새로운 DOM 튜토리얼

DOM 관련 기능을 실습으로 살펴보려면 DOM 보기 및 변경 시작하기를 확인하세요.

미리보기 채널 다운로드

Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 미리보기 채널을 사용하면 최신 DevTools 기능에 액세스하고, 최신 웹 플랫폼 API를 테스트하고, 사용자가 발견하기 전에 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

다음 옵션을 사용하여 DevTools와 관련된 새로운 기능, 업데이트 또는 기타 사항을 논의하세요.

DevTools의 새로운 기능

DevTools의 새로운 기능 시리즈에서 다룬 모든 항목의 목록입니다.