DevTools 의 새로운 기능 (Chrome 104)
Published on • Updated on
Translated to: English, Español, Português, 中文, Pусский, 日本語
Google 의 Chrome DevTools 팀에서 일하는 Developer Advocate 입니다
이 게시글의 번역에는 조은님이 참여하였으며, 최원영 님과 도창욱님이 리뷰를 맡아 주셨습니다.
DevTools를 개선하는 데 도움을 주고 싶으신가요? Google User Research 에 참여해보세요.
디버깅 중에 frame 재시작하기
frame 재시작 기능이 돌아왔습니다! 함수 어딘가에서 중단된 경우 이전 코드를 다시 실행할 수 있습니다. 이 기능은 안정성 문제가 있어 Chrome 92에서 더 이상 사용되지 않고 제거되었습니다.
다음 예제에서 디버거는 toggleColorScheme 함수의 끝 부분에 있는 브레이크 포인트 (343 라인) 에서 멈춥니다. toggleColorScheme 함수부터 다시 디버깅을 시작하기 위해서, Debugger 창에 있는 Call stack 섹션을 열고, toggleColorScheme 을 우클릭한 뒤 Restart frame 을 클릭하세요.
Chromium issue: 1303521
Recorder 패널의 느리게 다시보기 옵션들
이제 유저 플로우를 더 느린 속도 (느리게, 매우 느리게, 아주 느리게)로 다시볼 수 있습니다. 이러한 옵션을 통해 화면을 다시 보기할 때 각 단계를 더 면밀히 살펴볼 수 있게 합니다.
Recorder 패널을 열고, start a new recording 을 클릭하세요. 녹화가 끝나고 나서 Replay 드롭다운 버튼을 클릭하세요. or 다시 보기를 선택했을 때 속도를 선택할 수 있습니다.
Chromium issue: 1306756
Recorder 패널을 위한 확장 도구 만들기
선호하는 포맷으로 다시보기 스크립트를 추출하기 위해 Chrome 확장 도구를 만들거나 설치할 수 있습니다. 제작하는 방법에 대해 자세히 알고싶다면 Recorder extension API 문서를 참고하세요.
데모 확장도구를 설치하려면 문서에 존재하는 다음 스텝 을 따라하세요.
Chromium issue: 1325751
소스 패널에서 작성자 순/배포 순으로 파일 그룹핑하기
소스 패널에서 작성자 순/배포 순으로 파일 그룹핑하기 옵션을 사용하여 파일을 묶을 수 있습니다. 프레임워크 (React, Angular 등)을 이용해 웹 애플리케이션을 개발할 때, 빌드 도구 (Webpack, Vite)를 통해 생성된 압축된 파일들을 소스 파일에서 살펴보기 어려울 수 있기 때문입니다.
이 체크박스를 이용해, 파일을 2가지 카테고리로 그룹하여 빠르게 찾을 수 있습니다.
- Authored. IDE에서 보는 것과 비슷하게 소스 파일을 봅니다. DevTools 는 (빌드 도구에서 제공한) 소스맵을 바탕으로 이 파일들을 생성합니다.
- Deployed. 브라우저에서 읽어들인 실제 파일들입니다. 보통 이 파일들은 경량화되어있습니다.
다음 React 데모 에서 한 번 해보세요!
Chromium issue: 960909
Performance insights 패널에서 새로운 User Timings 추적
Performance insights 패널 안에서 새로운 User Timings 트랙을 사용하여 녹화본 내의 performance.measure() 마크를 시각화할 수 있습니다.
예를 들어, 다음 웹 페이지 에서 performance.measure() 메서드를 텍스트 로딩 경과 시간을 계산하기 위해 사용하고 있습니다.
measuring the page load 를 시작하면, 녹화본에서 User Timings 트랙이 보일 것입니다. 타이밍 아이템을 클릭하면 사이드 영역에서 상세한 내용을 볼 수 있습니다.
Chromium issue: 1322808
요소의 할당된 슬롯 표시
요소 패널에서 슬롯된 요소는 slot 뱃지와 함께 보입니다. 레이아웃 문제를 디버깅 할 때 이 기능을 사용하여 노드의 레이아웃에 영향을 미치는 요소를 더 빨리 식별할 수 있습니다.
다음 예제 에서는 이름 있는 슬롯을 가진 카드들을 포함하고 있습니다. 카드의 person-occupation 슬롯을 찾아낸 뒤, 할당된 슬롯에 표시된 slot 뱃지를 클릭하세요.
요소와
Chromium issue: 1018906
성능 기록을 위한 하드웨어 동시성 시뮬레이션
성능 패널에서 하드웨어 동시성 설정을 사용하여 navigator.hardwareConcurrency 를 통해 보고된 값을 정의할 수 있습니다.
일부 애플리케이션은 navigator.hardwareConcurrency를 사용하여 애플리케이션의 병렬 처리 정도를 제어합니다. 예를 들어, Emscripten pthread 풀 사이즈를 제어할 수 있습니다. 이 기능을 통해 개발자는 다양한 코어 수로 애플리케이션 성능을 테스트할 수 있습니다.
Chromium issue: 1297439
CSS 변수 자동 완성 시 색상이 아닌 값 미리보기
CSS 변수를 자동완성할 때, DevTools 는 값이 노드에 어떤 종류의 변경사항을 불러일으키는 지 미리 볼 수 있도록 색상이 아닌 값을 의미 있는 값으로 채웁니다.
Chromium issue: 1285091
뒤로-앞으로 캐시 창에서 차단 프레임 식별
애플리케이션 패널의 뒤로-앞으로 캐시 창의 새로운 frames 섹션에서, 페이지가 bfcache에 적합하지 못하게 하는 차단 프레임을 식별할 수 있습니다.
Chromium issue: 1288158
자바스크립트 객체 자동완성 제안 기능 개선
자바스크립트 객체 속성 자동 완성이 다음 순서대로 노출됩니다.
- 자신의 열거 가능한 속성
- 자신의 열거 불가능한 속성
- 상속받은 열거 가능한 속성
- 상속받은 열거 불가능한 속성
이전에는 자동완성 제안 기능이 상속된 속성보다 자체 속성을 선호하고, 모든 상속된 속성에는 동일한 우선순위가 부여되었기 때문에 개발자가 관련 속성을 찾기가 더 어려웠습니다.
Chromium issue: 1299241
소스맵 개선
전반적인 디버깅 경험을 개선하기 위한 소스맵 수정 사항이 있습니다.
- sourceURL 어노테이션을 이용한 인라인
<script>에서 중단점이 동작합니다. - 디버거가 소스맵을 사용하여 Scope 뷰에서 블록 범위 변수를 확인합니다.
- 디버거가 소스맵을 사용하여 Scope 뷰에서 화살표 함수 내 변수를 확인합니다.
Chromium issues: 1329113, 1322115
기타 하이라이트
이번 릴리스에서 수정된 사항들입니다.
- 소스 패널에서 자동 완성 설정 수정, 이전에는 설정이 비활성화된 경우에도 자동 완성이 항상 켜져 있었습니다. (1323286)
- 애플리케이션 패널 내 Manifest 탭에서 최신 색상 스킴 포맷으로 파싱하도록 개선 (1318305)
- Performance insights 패널에서
<script async>렌더링 차단 이슈를 위한 제안을 개선. 이전에는 DevTools가 script가 이미 async 속성을 가지고 있어도script 태그에 async 속성을 추가하세요라고 제안했습니다. (1334096) - Performance insights 패널에서 레이아웃 시프트를 유발할 가능성이 있는 iframe을 감지해냅니다. Details 창에서 iframe 상세를 볼 수 있습니다. (1328873)
- 커맨드 메뉴 에서 파일 열기 할 때, 작성된 파일 (소스맵을 통해 생성된 파일)이 비슷한 이름의 배포된 스크립트보다 더 상위에 노출됩니다. (1312929)
프리뷰 채널 다운로드하기
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
Chrome 107
- DevTools에서 키보드 단축키 커스터마이징
- 키보드 단축키로 라이트 / 다크 테마 전환하기
- 메모리 인스펙터에서 C/C++ 객체 하이라이팅
- HAR 가져오기에서 전체 이니시에이터 정보 지원
Enter키를 눌러 DOM 검색 시작- CSS flexbox
align-contentstart및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-reverseandcolumn-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
Updated on • Improve article