DevTools 의 새로운 기능 (Chrome 102)

이 게시글의 번역에는 최원영님이 참여하였으며, 조은님과 도창욱님이 리뷰를 맡아 주셨습니다.

# 미리보기 기능: 새로운 Performance insights 창

Performance insights 창을 이용하여 웹사이트 성능에 대해 실천 가능한, 그리고 유스 케이스에 기반한 인사이트를 발견할 수 있습니다.

여기를 클릭하여 창을 열고, 여러분의 유스 케이스를 바탕으로 녹화를 시작합니다. 한 가지 예시로, 이 데모 페이지 로딩을 측정해 보겠습니다.

녹화가 완료되면, 여러분은 Insight 창에서 Performance insight 를 볼 수 있습니다. 각각의 인사이트 항목(예시: Render blocking request 및 layout shift)을 클릭하여 페이지 내의 이슈와 잠재적인 수정 사항에 대해 알아보세요.

Performance insights 관련 문서 로 가면 단계별 튜토리얼을 볼 수 있습니다.

Performance insights 는 미리보기 기능으로서, 성능 전문가가 아닌 웹 개발자들이 잠재적인 성능 문제를 인식하고 해결하는 데에 도음을 줄 수 있습니다. 우리는 이 기능을 현재 활발하게 개발하고 있으며, 더 많은 개선사항을 위해서 여러분의 피드백이 필요합니다. Chromium issue: 1270700

# 새 바로가기 메뉴 - 라이트 테마 및 다크 테마 에뮬레이팅하기

여러분은 이제 스타일 창의 새 바로가기를 통해 라이트 테마 및 다크 테마를 좀 더 빠르게 에뮬레이트할 수 있습니다. (CSS 미디어 기능 prefers-color-scheme)

이전에는, 렌더링 탭에서 테마 에뮬레이션 을 위해 더 많은 단계를 거쳐야 했습니다.

Chromium issue: 1314299

# 네트워크 창의 미리보기 탭 보안 개선

DevTools의 새로운 기능 중 하나로, 네트워크 창의 미리보기 탭에 콘텐츠 보안 정책(CSP)이 적용되었습니다.

예를 들어, 첫 번째 스크린샷을 보면 이 페이지에는 혼합 콘텐츠가 포함되어 있습니다. 이 페이지는 안전한 HTTPS 연결을 통해 로딩되지만, 스타일시트는 로딩을 위해 보안되지 않은 HTTP 연결을 이용합니다.

브라우저는 스타일시트 요청을 기본적으로 제한합니다. 그러나 이 페이지를 네트워크 창의 미리보기 탭을 통해 열었을 때, 이전에는 스타일시트의 요청이 제한되지 않았습니다. (따라서 배경이 붉게 바뀝니다.) 그러나 이제는 여러분이 기대하는 것처럼 요청이 받아들여지지 않습니다.

Chromium issue: 833147

# 브레이크 포인트에서의 새로고침 개선

이제 브레이크 포인트에서 새로고침이 발생할 시, 스크립트 실행이 디버거에 의해 종료됩니다.

예를 들어, 리액트 데모 페이지 내부의 ReactDOM 브레이크포인트가 설정되고 새로고침될 때 이전에는 종료되지 않는 루프로 인해 소스 패널이 동작하지 않았습니다.

계속해서 자바스크립트를 실행하는 것은 개발자들에게 매우 많은 문제를 야기할 것이고, 또한 이는 렌더러를 깨진 상태로 남아 있게 할 수도 있습니다. 이 변경 사항은 디버깅 동작을 파이어폭스와 같은 다른 브라우저의 동작과 일치하도록 조정합니다.

Chromium issues: 1014415, 1004038, 1112863, 1134899

# 콘솔 업데이트

# 콘솔에서의 스크립트 실행 오류 다루기

콘솔에서의 스크립트 평가 중 발생한 오류는 window.onerror 핸들러를 실행시키는 데 적절한 오류 이벤트를 생성하며, 이 이벤트는 윈도우 객체의 "error" 이벤트로 전달됩니다.

Chromium issue: 1295750

# 엔터키로 라이브 표현식 행하기

이번 업데이트에서 여러분이 라이브 표현식을 타이핑한 후 실행하기 위해서는 Enter를 클릭하면 됩니다. 이전 버전에서는 Enter 키를 치면 새로운 라인이 추가되었으며, 이는 DevTools 의 다른 기능들과 일치하지 않았습니다.

라이브 표현식 편집기에서 새로운 라인을 추가하기 위해서는 Shift + Enter 를 사용하세요.

Chromium issue: 1260744

# 시작 전에 유저 플로우 녹화 취소하기

이전 버전에서는 녹화를 취소할 수 있는 옵션이 없었으나 이제 유저 플로우 녹화 시작 중에도 취소가 가능해졌습니다.

Chromium issue: 1257499

# 스타일 창에 상속된 하이라이트 의사 요소들 표시하기

스타일 창에서 상속된 하이라이트 의사 요소들 (예시: ::selection, ::spelling-error, ::grammar-error, ::highlight)을 보세요. 이전에는 이 규칙들이 표시되지 않았습니다.

스펙 문서에 언급되었듯이 다중 스타일이 충돌을 일으킬 때, 캐스케이드가 가장 우선시되는 스타일을 결정합니다. 이 새로운 기능은 여러분들로 하여금 상속과 우선되는 규칙을 더 잘 이해할 수 있도록 해 줍니다.

Chromium issue: 1024156

# 기타 하이라이트

그 외 여러 가지 주목할 만한 개선점들이 추가되었습니다:

• 이제 속성 창은 창은 이전 버전에서는 숨겨져 있었던 접근자 속성 값을 기본적으로 표시합니다. (1309087)
• 스타일 창이 오버라이딩된 @support 규칙을 취소선으로 적절하게 표시하기 시작했습니다. 이전 버전에서는 취소선이 표시되지 않았습니다. (1298025)
• 소스 창에서 CSS를 편집할 떄 여러 개의 빈 줄을 만들던 CSS 포매팅 로직이 현 버전에서 수정되었습니다.
• 콘솔에 있는 객체의 재귀적으로 확장 옵션을 최대 100으로 제한하여 원형 개체에 대해 영원히 지속되지 않도록 합니다. (1272450)

# [실험 기능] CSS에서의 변경사항 복사

스타일 창은 여러분의 CSS 변경사항을 녹색으로 강조해 줍니다. 변경사항 위로 마우스를 가져간 다음 옆에 있는 복사 버튼을 클릭하여 복사할 수 있습니다.

그 외에도, 어떤 규칙 위에서 마우스 우클릭 후 모든 CSS 변경사항 복사 를 선택하여, 모든 변경사항들을 복사할 수 있습니다.

변경사항 탭에 새로운 복사 버튼이 추가되었으며, 이는 여러분들의 변경 이력을 추적하고 CSS 변경사항들을 쉽게 복사할 수 있도록 합니다. ]

Chromium issue: 1268754

# [실험 기능] 브라우저 바깥의 색상 선택하기

이전 버전에서는 브라우저 내부에서만 색상을 선택할 수 있었습니다만 실험 기능을 활성화하여, 브라우저 바깥의 색상을 컬러 피커를 통해 선택할 수 있습니다.

스타일 창에서 임의의 색상 미리보기를 클릭하여 컬러 피커를 열 수 있으며, 스포이드 아이콘을 이용하여 원하는 곳의 색상을 선택합니다.

Chromium issue: 1245191

# 프리뷰 채널 다운로드하기

Chrome Canary, Dev, Beta 를 기본 개발용 브라우저로 사용해보는 걸 검토해보세요. 프리뷰 채널에서는 최신 DevTools 기능들을 사용할 수 있고, 갓 나온 웹 플랫폼 API를 테스트해 볼 수 있으며, 사용자들이 사이트의 문제를 보기전에 미리 찾아낼 수 있습니다.

# Chrome DevTools 팀과 이야기 나누기

아래 옵션을 사용하여 게시물의 새로운 기능 및 변경 사항, 또는 DevTools 관련된 기타 사항에 토론해보세요.

• crbug.com 를 이용한 피드백 및 제안 전달하기.
• DevTools 에서 More options     > Help > Report a DevTools issues 를 사용하여 DevTools 이슈 제보하기.
• @ChromeDevTools 에 트윗하기.
• What's new in DevTools YouTube 비디오 에 댓글 남기기.

# 더 많은 DevTools 기능

What's New In DevTools 영어 버전을 참고하여 관련 기능의 전체 목록을 볼 수 있습니다. 아래 콘텐츠들은 한국어로 번역된 콘텐츠들입니다.

# Chrome 108

• 비활성화된 CSS 프로퍼티에 대한 힌트
• Recoder 패널에서의 XPath 와 텍스트 셀렉터의 자동 인식
• 쉼표로 구분된 표현식을 통한 진행
• 개선된 무시 목록 설정
• 기타 하이라이트

# Chrome 107

• DevTools에서 키보드 단축키 커스터마이징
• 키보드 단축키로 라이트 / 다크 테마 전환하기
• 메모리 인스펙터에서 C/C++ 객체 하이라이팅
• HAR 가져오기에서 전체 이니시에이터 정보 지원
• Enter 키를 눌러 DOM 검색 시작
• CSS flexbox align-content start 및 end 아이콘 표시
• 기타 하이라이트

# Chrome 106

• 소스 패널에서 저작/배포 단위로 파일 그룹화하기
• 비동기 동작들에 대해 연결된 스택 추적
• 알려진 서드파티 스크립트를 자동으로 무시하기
• 개선된 호출 스택 디버깅
• 소스 패널에서 무시 목록에 포함된 소스들 숨기기
• 명령 메뉴에서 무시 목록에 포함된 소스들 숨기기
• 성능 패널의 새로운 상호 작용 추적
• 성능 인사이트 패널의 LCP 타이밍 세부 분석
• 기록 패널의 기록 이름 자동 생성
• 기타 하이라이트

# Chrome 105

• Recorder의 단계별 재생 기능
• Recorder 패널에서 마우스 오버 이벤트 기능 지원
• Performance insights 패널의 Largest Contentful Paint (LCP)
• 레이아웃 변경의 잠재적 근본 원인으로서 텍스트 깜박임(FOIT, FOUT) 식별
• 매니페스트 창의 프로토콜 핸들러
• 요소 패널의 Top layer badge
• 런타임에 Wasm 디버깅 정보 연결하기
• 디버깅 중의 라이브 에디트 지원
• 스타일 창에서의 @scope at rules 보기 및 편집하기
• 소스맵 개선
• 기타 하이라이트

# Chrome 104

• 디버깅 중에 frame 재시작하기
• Recorder 패널의 느리게 다시보기 옵션들
• Recorder 패널을 위한 확장 도구 만들기
• 소스 패널에서 작성자 / 배포 순 그룹하기
• Performance insights 패널에서 새로운 User Timings 추적
• 요소의 할당된 슬롯 표시
• 성능 기록을 위한 하드웨어 동시성 시뮬레이션
• CSS 변수 자동 완성 시 색상이 아닌 값 미리보기
• 뒤로-앞으로 캐시 창에서 차단 프레임 식별
• 자바스크립트 객체 자동완성 제안 기능 개선
• 소스맵 개선
• 기타 하이라이트

# Chrome 103

• Recorder 패널에서 더블 클릭 & 우 클릭 이벤트 캡쳐하기
• Lighthouse 패널에서 새로 출시된 timspan 과 snapshot 모드
• Performance Insights 패널에서 zoom 컨트롤 개선
• 성능 레코딩 삭제 확인
• 요소 패널에서 창 재배치하기
• 브라우저 밖의 색상 선택하기
• 디버깅 중 인라인 값 미리보기 개선
• 가상 인증자를 위한 대규모 Blob 지원
• 소스 패널에서 새로운 키보드 단축키 지원
• 소스맵 개선

# Chrome 102

• 미리보기 기능: 새로운 Performance insights 창
• 새 바로가기 메뉴 - 라이트 테마 및 다크 테마 에뮬레이팅하기
• 네트워크 창의 미리보기 탭의 보안 개선
• 브레이크 포인트에서의 재로딩 개선
• 콘솔 업데이트
• 시작 전에 유저 플로우 녹화 취소하기
• 스타일 창에 상속된 하이라이트 의사 속성들 표시하기
• 기타 하이라이트
• [실험 기능] CSS에서의 변경사항 복사
• [실험 기능] 브라우저 바깥의 색상 선택하기

# Chrome 101

• 녹화된 유저 플로우를 JSON 파일로 내보내고 불러오기
• 스타일 창에서 cascade 레이어 보기
• hwb() 색상 함수 지원
• private 속성 표시 개선
• 기타 하이라이트
• [실험] Lighthouse 패널의 새로운 시간 범위 (timespan) 및 스냅샷 (snapshot) 모드

# Chrome 100

• 스타일 창의 규칙에서 @supports 보기 및 편집하기
• 공통 셀렉터의 기본 지원
• 기록 셀렉터의 커스터마이징
• 기록 이름 바꾸기
• 마우스를 올려서 클래스/함수 미리보기
• 성능 창에서의 유휴 상태 프레임
• 기타 하이라이트

# Chrome 99

• 웹 소켓 요청 쓰로틀링
• 애플리케이션 패널에 Reporting API 창 추가
• Recorder 패널에서 요소가 클릭 가능 / 표시될 때까지 대기 지원
• 콘솔 스타일링, 포매팅, 필터링 개선
• 소스맵 파일을 이용한 Chrome extension 디버깅
• 소스 패널에서 소스 폴더 트리 개선
• 소스 패널에서 워커 소스 파일 표시
• Chrome 자동 다크 테마 개선
• 터치에 친화적인 컬러 피커와 창 분리
• 기타 하이라이트

# Chrome 98

• 미리보기 기능: 전체 페이지 접근성 트리
• 변경 탭에서의 더욱 정교한 변화들
• 유저 플로우 레코딩을 위한 더 긴 타임아웃 설정
• 뒤로/앞으로 캐쉬 탭을 이용해 페이지가 캐쉬 가능한지 확인하기
• 새로 추가된 속성 창 필터
• CSS의 forced-colors 미디어 기능 에뮬레이팅
• 마우스를 가져가면 눈금자 표시
• Flexbox 편집기에서의 row-reverse and column-reverse 지원
• XHR 다시 재생 및 모든 검색 결과 표시를 위한 키보드 단축키 추가
• Lighthouse panel의 Lighthouse 9
• 소스 패널에서의 개선점들
• 기타 하이라이트
• [실험실 기능] Reporting API 창에서의 엔드포인트

# Chrome 97

• 기능 미리보기: 신규 Recorder 패널
• Device Mode 의 기기 목록 갱신
• HTML로 수정에서 자동완성
• 코드 디버깅 경험 개선
• [실험적 기능] 여러 기기 사이의 DevTools 설정 동기화

# Chrome 96

• 미리보기 기능: 새로운 CSS 개요 영역
• 복원 및 개선된 CSS 길이 편집 및 복사 경험
• CSS 의 prefers-contrast 미디어 기능 에뮬레이션
• 크롬의 자동 어두운 테마 기능 에뮬레이션
• 스타일 영역에서 선언을 자바스크립트로 복사하기
• 네트워크 패널의 새로운 페이로드 탭
• 속성 영역 내의 속성 표시 방법의 개선
• 콘솔의 CORS 에러 숨김 옵션
• 콘솔에서 적절한 Intl 객체 미리보기 및 값 판별
• 일관적인 async 스택 추적
• 콘솔 사이드바 유지
• 애플리케이션 패널 내 애플리케이션 캐시 영역 제거 예정
• [실험실 기능] 애플리케이션 패널에 새롭게 추가된 Reporting API 영역

# Chrome 95

• 새 CSS 길이 작성 도구
• 문제 탭에서 문제 숨기기
• 속성 표시 개선
• Lighthouse 8.4
• 소스 패널에서 스니펫 정렬
• 번역된 릴리스 정보로 이동하는 링크 및 번역 관련 버그 제보
• DevTools 커맨드 메뉴 UI 개선

# Chrome 94

• DevTools 를 이제 여러분들이 선호하는 언어로 사용하세요
• 기기 목록에 Nest Hub 가 새로이 추가되었습니다
• 프레임 상세 화면에서 Origin trials 가 제공됩니다
• 새로운 CSS 컨테이너 쿼리 배지
• 체크박스 클릭 한 번으로 네트워크 필터 반전 가능
• 다가오는 콘솔 사이드바의 디프리케이션
• 이슈 탭과 네트워크 패널에서 로우(raw) Set-Cookie 헤더 표시
• C고유한 프로퍼티로서의 내이티브 접근자를 콘솔에서 일관성 있게 표시
• #sourceURL을 포함하는 인라인 스크립트를 위한 적절한 오류 스택 추적
• 계산된 창에서의 색상 포맷 변경
• 사용자 정의 도구 설명이 내이티브 HTML 도구 설명으로 변경됨
• [실험중] 이슈 탭에서 이슈들을 숨기기

# Chrome 93

• Styles 패널에서 CSS 컨테이너 쿼리를 수정할 수 있습니다
• Network 패널에서 Web bundle 미리보기
• Attribution Reporting API 디버깅
• Console 에서 더 나은 문자열 (string) 제어
• CORS 디버깅 개선
• Lighthouse 8.1
• Manifest 패널에서 new note URL을 보여줍니다
• CSS 매칭 셀렉터 수정
• Network 패널에서 JSON 응답 Pretty-printing 하기