DevTools의 새로운 기능 (Chrome 74)

케이스 바스크
케이스 바스크

다시 방문해 주셔서 감사합니다. 새로운 기능을 소개합니다.

이 페이지의 동영상 버전

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

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

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

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

감사 패널의 Lighthouse v4

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

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

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

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

WebSocket 바이너리 메시지 뷰어

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

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

    Network 패널

    그림 4. Network 패널

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

    WS 전용 WebSockety 연결을 클릭하면 WebSockety 연결이 표시됨

    그림 5. WS 전용 WebSockety 연결을 클릭하면 WebSockety 연결이 표시됨

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

    WebSocket 연결 검사

    그림 6. WebSocket 연결 검사

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

    메시지 탭

    그림 7. 메시지 탭

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

    바이너리 메시지 검사

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

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

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

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

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

영역 스크린샷을 사용하면 표시 영역 일부의 스크린샷을 캡처할 수 있습니다. 이 기능은 한동안 출시되었지만 액세스하기 위한 워크플로가 꽤 숨겨져 있습니다. 이제 명령 메뉴에서 영역 스크린샷을 사용할 수 있습니다

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

    Command 메뉴

    그림 10. Command 메뉴

  2. area을 입력하다가 Capture area screenshot(영역 스크린샷 캡처)을 선택한 후 Enter 키를 누릅니다.

  3. 스크린샷을 찍으려는 표시 영역의 섹션으로 마우스를 드래그합니다.

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

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

Network 패널의 서비스 워커 필터

네트워크 패널 필터 텍스트 상자에 is:service-worker-initiated 또는 is:service-worker-intercepted를 입력하여 서비스 워커에 의해 발생 (initiated)되었거나 수정되었을 수 있는 (intercepted) 요청을 확인합니다.

필터링 기준: is:service-worker-started

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

필터링 기준: is:service-worker-intercepted

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

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

성능 패널 업데이트

이제 성능 기록이 장기 작업과 첫 페인트를 마크업합니다.

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

성능 기록의 장기 작업

이제 실적 기록에 긴 할 일이 표시됩니다.

공연 녹화 파일에서 긴 작업 위로 마우스를 가져감

그림 14. 공연 녹화 파일에서 긴 작업 위로 마우스를 가져감

타이밍 섹션의 첫 번째 페인트

이제 공연 기록의 타이밍 섹션이 첫 페인트로 표시됩니다.

타이밍 섹션의 첫 번째 페인트

그림 15. 타이밍 섹션의 첫 번째 페인트

새 DOM 튜토리얼

DOM 관련 기능을 직접 둘러보려면 DOM 보기 및 변경 시작하기를 참고하세요.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.

  • crbug.com을 통해 제안 또는 의견을 제출하세요.
  • DevTools에서 옵션 더보기   더보기   > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다.
  • @ChromeDevTools로 트윗을 보냅니다.
  • DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 댓글을 남겨주세요.

DevTools의 새로운 기능

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

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82가 취소되었습니다.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59