DevTools 의 새로운 기능 (Chrome 105)

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

# Recorder의 단계별 재생 기능

이제 Recorder 패널에서 브레이크포인트를 설정하고, 유저 플로우를 단계별로 재생할 수 있습니다.

브레이크포인트를 설정하기 위해, 각 단계 옆에 있는 파란색 점을 클릭합니다. 여러분의 유저 플로우가 재생되며, 각 단계를 실행하기 전에 재생이 잠시 정지되며, 이 때 여려분은 재생을 계속하거나, 각 단계를 실행하거나, 혹은 재생을 취소할 수 있습니다.

이 기능은 유저 플로우를 보다 쉽게 시각화할 수 있고, 디버깅을 용이하게 할 수 있습니다.

자세한 설명은 Recorder features reference 를 참고하세요.

Chromium issue: 1257499

# Recorder 패널에서 마우스 오버 이벤트 기능 지원

Recorder 기능에서 레코딩 시에 마우스 오버 (호버) 단계를 수동으로 추가하는 것이 가능해졌습니다.

데모에서 볼 수 있듯이, 마우스 호버 시에 팝업 메뉴가 표출됩니다. 유저 플로우의 녹화 및 메뉴 아이템 클릭을 시도해 보세요.

녹화 중에 Recorder 가 마우스 오버 이벤트를 자동적으로 감지하기 않기 때문에 지금 당신이 유저 플로우를 재생한다고 할지라도 재생이 실패할 것입니다. 이 문제를 해결하기 위해서, 메뉴 항목을 클릭하기 전에 이 단계를 수동으로 추가하여 셀렉터 위로 마우스를 올릴 수 있습니다.

Chromium issue: 1257499

# Performance insights 패널의 Largest Contentful Paint (LCP)

LCP 는 인지 로드 속도를 측정하기 위한 중요한 사용자 중심적 측정 기준입니다. 여러분은 이제 최대 콘텐츠풀 페인트(LCP) 의 중요한 경로와 근본적인 원인을 찾을 수 있습니다.

performance recording 에서, 타임라인 의 LCP 배지를 클릭하세요. Details 창에서, 여러분은 LCP 점수를 볼 수 있고, LCP를 느리게 만드는 리소스를 어떻게 수정할지를 알 수 있고, LCP 자원의 중요한 경로를 찾을 수 있습니다.

Performance Insights 를 통해 실행 가능한 다각도의 해법을 얻는 방법과, 여러분의 웹사이트 성능 개선을 어떻게 할 수 있는지를 알아보세요.

Chromium issue: 1326481

# 레이아웃 변경의 잠재적 근본 원인으로서 텍스트 깜박임(FOIT, FOUT) 식별

이제 Performance insights 패널에서, 레이아웃 변경의 잠재적 근본 원인으로서 보이지 않는 텍스트 깜박임(FOIT)과 스타일이 지정되지 않은 텍스트 깜박임(FOUT)을 감지할 수 있습니다.

레이아웃 변경의 잠재적 근본 원인을 찾아보기 위해서, Layout shifts 트랙 내의 스크린샷을 클릭하세요.

WebFont 로딩 및 렌더링 최적화에서 레이아웃 변경을 방지하기 위한 기술들을 배워 보세요.

Chromium issues: 1334628, 1328873

# 매니페스트 창의 프로토콜 핸들러

이제 여러분은 DevTools를 이용하여 프로그레시브 웹 앱(PWA)에 대한 URL 프로토콜 핸들러 등록을 테스트할 수 있습니다.

URL 프로토콜 핸들러 등록을 통해, 설치된 PWA(프로그레시브 웹 앱)이 특정한 프로토콜 (예: magnet, web+example) 핸들링하도록 할 수 있으며, 이는 더욱 통합된 경험을 위해서입니다.

여러분은 애플리케이션 > 매니페스트 창을 통해 프로토콜 핸들러 로 들어갈 수 있으며, 여기서 모든 이용가능한 프로토콜을 확인하고 테스트할 수 있습니다.

간단한 예시로, 데모 PWA 앱을 설치해 보세요. 그리고 프로토콜 핸들러 섹션에서 "americano" 를 입력하고 Test protocol 를 클릭하여 PWA 앱의 커피 페이지를 엽니다.

Chromium issues: 1300613

# 요소 패널의 Top layer badge

Top layer badge 를 사용하여, top layer의 개념을 이해할 수 있으며 또한 top layer 의 컨텐츠 변화를 시각화할 수 있습니다.

<dialog> 요소 가 최근에 웹 브라우저들에 대해 안정화되었습니다. 여러분이 다이얼로그를 열 때, 이는 top layer에 위치하게 됩니다. 최상위 레벨 컨텐츠는 기타 다른 컨텐츠 위에 렌더링됩니다.

주어진 데모 페이지에서 Open dialog를 클릭합니다.

top layer 요소를 시각화하기 위해, DevTools는 top layer 컨테이너 (#top-layer) 를 DOM 트리에 추가하며, 이는 </html> 태그 다음에 위치합니다.

top layer 컨테이너 요소로부터 top layer 트리 요소로 이동하려면 top layer 트리 요소 또는 top layer 컨테이너의 배경 옆에 있는 reveal 버튼을 클릭하세요.

top layer 트리 요소 옆에 있는 (예: dialog 요소) top-layer 배지를 클릭하여 top layer 컨테이너로 이동합니다.

Chromium issue: 1313690

# 런타임에 Wasm 디버깅 정보 연결하기

여러분은 이제 런타임에 wasm 에 대한 DWARF 디버깅 정보를 연결할 수 있습니다. 이전에는 소스 패널만이 소스맵을 자바스크립트와 Wasm 파일에 연결할 수 있었습니다.

소스 패널에서 Wasm 파일을 엽니다. 편집기에서 마우스 오른쪽을 클릭한 후, Add DWARF debugging info… 를 선택하여 필요한 디버깅 정보를 연결합니다.

Chromium issue: 1341255

# 디버깅 중의 라이브 에디트 지원

이제 여러분은 디버거를 재시작하지 않고도 스택 내의 최상위 함수를 편집할 수 있습니다.

Chrome 104 에서, DevTools는 restart frame 기능을 부활시켰습니다. 그러나 여러분은 현재 일시정지된 함수를 편집할 수 없었습니다. 한편, 개발자가 함수를 중단한 다음 일시 중지된 동안 해당 기능을 편집하는 것이 일반적입니다.

이번 업데이트에서, 다음과 같은 제한 조건에서 디버거가 자동적으로 함수를 재시작합니다.

• 일시중지된 상태에서 최상위 함수만 편집할 수 있습니다.

• 스택 아래에서 동일 함수의 재귀호출이 허용되지 않습니다.

Chromium issue: 1334484

# 스타일 창에서의 @scope at rules 보기 및 편집하기

여러분은 이제 CSS @scope at-rules를 스타일 창에서 보고 편집할 수 있습니다.

@scope at rules는 CSS Cascading and Inheritance Level 6 specification의 한 부분이며, 이러한 규칙을 통해 개발자는 CSS에서 스타일 규칙의 범위를 지정할 수 있습니다.

데모 페이지를 열고 <div class=”dark-theme”> 요소 내부의 하이퍼링크를 검사합니다. 스타일 창에서, @scope at-rules 를 볼 수 있으며 이를 편집하기 위해 규칙 선언을 클릭합니다.

Chromium issue: 1337777

# 소스맵 개선

전반적인 디버깅 경험을 개선하기 위한 소스맵에 대한 몇 가지 수정 사항입니다:

DevTools는 현재 구두점을 통해 소스맵 식별자를 적절하게 해결합니다. 몇몇 모던한 축소자는 일부 현대식 축소자(예: esbuild) 는 식별자를 후속 구두점과 병합하는 소스맵을 생성합니다.

DevTools는 현재 super를 호출하는 생성자에 대한 소스맵 이름 문제를 해결합니다.

중복된 표준 URL에 대한 소스 맵 URL 인덱싱을 수정했습니다. 이전에는 중복된 표준 URL로 인해 일부 파일에서 중단점이 활성화되지 않았습니다.

Chromium issue: 1335338, 1333411

# 기타 하이라이트

이번 릴리스에는 몇몇 주목할 만한 수정사항이 포함되어 있습니다.

• 로컬 스토리지의 키- 쌍이 삭제되었을 때, 애플리케이션 > 로컬 스토리지 창의 테이블로부터 적절하게 제거합니다.(1339280)

• 소스 패널에서 CSS파일을 볼 때, 색상 미리보기가 현재 바르게 표시됩니다. (1340062)

• 레이아웃 창에서 CSS Flex 와 grid item 을 일관되게 표시하고 이들을 요소패널에 배지로서 표시합니다. 이전에는 flex item과 grid item 이 양쪽 모두에서 무작위로 누락되었습니다. (1340441, 1273992)

• DevTools 가 특정 프레임을 광고로서 표시하도록 하는 스크립트를 발견한 경우, ad frames에 대해 새로운 Creator Ad Script 링크가 이용가능해집니다. 여러분은 애플리케이션 > 프레임 을 통해 프레임을 열 수 있습니다. (1217041)

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

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 하기