소스 패널에서 작성됨 / 배포됨별로 파일 그룹화
이제 작성됨 / 배포됨별로 파일 그룹화가 점 3개 메뉴에 표시됩니다. 이전에는 탐색창에 바로 표시되었습니다.
이 데모를 엽니다. 작성됨 / 배포됨별로 파일 그룹화 설정을 사용 설정하면 원래 소스 코드 (작성됨)를 먼저 확인하고 더 빠르게 이동할 수 있습니다.
Chromium 버그: 1352488
향상된 스택 트레이스
비동기 작업을 위해 연결된 스택 트레이스
일부 작업이 비동기적으로 실행되도록 예약되면 DevTools의 스택 트레이스가 작업의 '전체 스토리'를 알려줍니다. 이전에는 일부만 말씀드렸습니다.
예를 들어 이 데모를 열고 증가 버튼을 클릭합니다. 콘솔에서 오류 메시지를 펼칩니다. 소스 코드에는 비동기 timeout
작업이 포함됩니다.
// application.component.ts
async increment() {
await Promise.resolve().then(() => timeout(100));
…
}
이전에는 스택 트레이스에 시간 제한 작업만 표시되었습니다. 이 작업의 '근본 원인'은 표시되지 않았습니다.
최신 변경사항으로 이제 DevTools에서 버튼 구성요소의 onClick
이벤트에서 작업이 발생한 후 increment
함수, 제한 시간 작업이 차례로 표시됩니다.
보이지 않는 곳에서 DevTools가 새로운 '비동기 스택 태그 지정' 기능을 도입했습니다. 비동기 코드의 두 부분을 새 console.createTask()
메서드와 연결하여 작업의 전체 스토리를 전달할 수 있습니다. 자세한 내용은 DevTools의 최신 디버깅을 참고하세요.
복잡하게 들리나요? 전혀 그렇지 않습니다. 대부분의 경우 사용 중인 프레임워크가 예약과 비동기 실행을 처리합니다. 이 경우 API 사용 여부는 프레임워크에서 결정하므로 개발자는 이에 대해 걱정할 필요가 없습니다. (예: Angular에서 이러한 변경사항 구현)
Chromium 버그: 1334585
알려진 서드 파티 스크립트 자동 무시
이제 DevTools가 알려진 타사 스크립트를 무시 목록에 자동으로 추가하기 때문에 디버깅 중에 코드의 문제를 더 빠르게 식별할 수 있습니다.
이 데모를 열고 증가 버튼을 클릭합니다. 콘솔에서 오류 메시지를 펼칩니다. 스택 트레이스에는 코드만 표시됩니다 (예: app.component.ts
button.component.ts
). 풀 스택 트레이스를 보려면 프레임 더보기를 클릭합니다.
이전에는 스택 트레이스에 zone.js
및 core.mjs
와 같은 서드 파티 스크립트가 포함되었습니다. 이는 소스 코드가 아니며 번들러 (예: webpack) 또는 프레임워크 (예: Angular)에서 생성됩니다. 오류의 근본 원인을 파악하는 데 시간이 더 오래 걸렸습니다.
내부적으로 DevTools는 소스 맵의 새 x_google_ignoreList
속성을 기반으로 서드 파티 스크립트를 무시합니다. 프레임워크 및 번들러가 이 정보를 제공해야 합니다. 우수사례: DevTools를 사용하여 Angular 디버깅 개선을 참조하세요.
전체 스택 트레이스를 항상 확인하려면 설정 > 무시 목록 > 알려진 서드 파티 스크립트를 무시 목록에 자동 추가를 통해 설정을 사용 중지하면 됩니다.
Chromium 버그: 1323199
디버깅 중 호출 스택 개선
무시 목록에 알려진 서드 파티 스크립트를 자동으로 추가 설정을 사용하면 이제 호출 스택에 코드와 관련된 프레임만 표시됩니다.
이 데모를 열고 app.component.ts
의 increment()
함수에 중단점을 설정합니다. 페이지에서 증가 버튼을 클릭하여 중단점을 트리거합니다. 호출 스택은 코드의 프레임만 표시합니다 (예: app.component.ts
및 button.component.ts
).
모든 프레임을 보려면 무시된 프레임 표시를 사용 설정합니다. 이전에는 DevTools가 기본적으로 모든 프레임을 표시했습니다.
Chromium 버그: 1352488
소스 패널에서 무시 목록에 포함된 소스 숨기기
탐색 창에서 관련 없는 파일을 숨기려면 무시 목록에 포함된 소스 숨기기를 사용 설정합니다. 이렇게 하면 코드에만 집중할 수 있습니다.
이 데모를 엽니다. 소스 패널에서 node_modules
및 webpack
는 서드 파티 스크립트입니다. 점 3개 메뉴를 클릭하고 무시 목록에 포함된 소스 숨기기를 선택하여 창에서 소스를 숨깁니다.
Chromium 버그: 1352488
명령 메뉴에서 무시 목록에 포함된 파일 숨기기
무시 목록에 포함된 소스 숨기기 설정을 사용하면 명령어 메뉴를 사용하여 파일을 더 빠르게 찾을 수 있습니다. 이전에는 명령어 메뉴에서 파일을 검색하면 나와 관련 없는 서드 파티 파일이 반환되었습니다.
예를 들어 무시 목록에 포함된 소스 숨기기 설정을 사용 설정하고 점 3개 메뉴를 클릭합니다. 파일 열기를 선택합니다. 'ton'을 입력하여 버튼 구성요소를 검색합니다. 이전에는 node_modules
의 파일이 결과에 포함되었으며, 이는 node_modules
파일 중 하나이며 첫 번째 결과로 표시되었습니다.
Chromium 버그: 1336604
실적 패널의 새로운 상호작용 트랙
실적 패널의 새로운 상호작용 트랙을 사용하여 상호작용을 시각화하고 잠재적인 응답성 문제를 추적할 수 있습니다.
예를 들어 이 데모 페이지에서 공연 녹화를 시작하세요. 커피를 클릭하고 기록을 중지합니다. 두 가지 상호작용이 Interactions(상호작용) 트랙에 표시됩니다. 두 상호작용의 ID가 동일하며, 이는 상호작용이 동일한 사용자 상호작용에서 트리거되었음을 나타냅니다.
Chromium 버그: 1347390
성능 통계 패널의 LCP 타이밍 분석
이제 성능 통계 패널에 최대 콘텐츠 렌더링 시간 (LCP)의 타이밍 분석이 표시됩니다. 이러한 타이밍 정보를 사용하여 LCP 성능을 개선할 기회를 파악하고 파악하세요.
Chromium 버그: 1351735
녹음기 패널에서 녹음 파일의 기본 이름 자동 생성
이제 Recorder 패널에서 새 녹음 파일의 이름을 자동으로 생성합니다.
Chromium 버그: 1351383
기타 주요 사항
- 이전에는 때때로 녹음기 확장 프로그램이 녹음기 패널에 표시되지 않았습니다. 추가했습니다. (1351416)
- 이제 스타일 창에 SVG
<stop>
요소의stop-color
속성에 관한 색상 선택 도구가 표시됩니다. 추가했습니다. (1351096) - 성능 통계 패널에서 레이아웃 변경의 잠재적 근본 원인으로 레이아웃 스래싱을 유발하는 스크립트를 확인하세요. 수정합니다. (1343019)
- 실적 통계 패널에 LCP 웹 글꼴의 주요 경로를 표시합니다. 추가했습니다. (1350390)
미리보기 채널 다운로드
Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 Preview 채널을 통해 개발자는 최신 DevTools 기능에 액세스하고 최첨단 웹 플랫폼 API를 테스트하며 다른 사용자보다 먼저 사이트에서 문제를 찾을 수 있습니다.
Chrome DevTools팀에 문의하기
게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.
- crbug.com을 통해 제안 또는 의견을 제출하세요.
- DevTools에서 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다.
- @ChromeDevTools로 트윗을 보냅니다.
- DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 댓글을 남겨주세요.
DevTools의 새로운 기능
DevTools의 새로운 기능 시리즈에서 다룬 모든 사항의 목록
Chrome 123
- 이스터 에그 찾기
- 요소 패널 업데이트
- 요소 > 스타일에서 포커스가 설정된 페이지 에뮬레이션
var()
대체의 색상 선택 도구, 각도 시계, 이징 편집기- CSS 길이 도구가 지원 중단됨
- 실적 > 기본 트랙에서 선택한 검색 결과에 대한 팝오버
- 네트워크 패널 업데이트
- 네트워크 > 이벤트 스트림 탭의 지우기 버튼 및 검색 필터
- 네트워크 > 쿠키에서 서드 파티 쿠키에 대한 예외 사유가 포함된 툴팁
- 소스의 모든 중단점 사용 설정 및 사용 중지
- Node.js용 DevTools에서 로드된 스크립트 보기
- Lighthouse 11.5.0
- 접근성 개선
- 기타 주요 사항
Chrome 122
- 녹음기 확장 프로그램 공식 컬렉션 이용 가능
- 네트워크 개선
- 상태 열의 실패 이유
- 개선된 복사 하위 메뉴
- 성능 개선
- 타임라인의 탐색경로
- 기본 트랙의 이벤트 시작자
- Node.js DevTools의 JavaScript VM 인스턴스 선택기 메뉴
- 소스의 새로운 단축키 및 명령어
- 요소 개선
- 이제 스타일에서 ::view-transition pseudo-element를 수정할 수 있습니다.
- 블록 컨테이너의 align-content 속성 지원
- 에뮬레이션된 폴더블 기기의 상태 지원
- 동적 테마 설정
- 네트워크 및 애플리케이션 패널에 표시되는 서드 파티 쿠키의 단계적 경고
- Lighthouse 11.4.0
- 접근성 개선
- 기타 주요 사항
Chrome 121
- 요소 개선
- Network(네트워크) 패널의 간소화된 필터 표시줄
@font-palette-values
지원- 지원되는 사례: 다른 맞춤 속성의 대체 값으로 사용하는 맞춤 속성
- 개선된 소스 맵 지원
- 성능 패널 개선
- 향상된 상호작용 트랙
- 상향식, 호출 트리, 이벤트 로그 탭에서 고급 필터링
- Sources 패널의 들여쓰기 마커
- Network(네트워크) 패널의 재정의된 헤더 및 콘텐츠에 관한 유용한 도움말
- 요청 차단 패턴을 추가하고 삭제하는 새로운 명령어 메뉴 옵션
- CSP 위반 실험이 삭제됨
- Lighthouse 11.3.0
- 접근성 개선
- 기타 주요 사항
Chrome 120
- 서드 파티 쿠키 단계적 지원 중단
- 개인 정보 보호 샌드박스 분석 도구로 웹사이트의 쿠키 분석
- 목록 무시 개선
- node_modules의 기본 제외 패턴
- 포착된 예외가 이제 무시되지 않은 코드를 통해 포착되거나 전달되는 경우 실행을 중지함
- 소스 맵에서
x_google_ignoreList
의 이름을ignoreList
로 바꿨습니다. - 원격 디버깅 중에 새로운 입력 모드 전환
- 이제 요소 패널에 #document 노드의 URL이 표시됩니다
- 애플리케이션 패널의 효과적인 콘텐츠 보안 정책
- 애니메이션 디버깅 개선
- Sources의'Do you trust this code?' 대화상자 및 Console의 self XSS 경고
- 웹 워커 및 Worklet의 이벤트 리스너 중단점
<audio>
및<video>
의 새 미디어 배지- 미리 로드의 이름이 추측 로드로 변경됨
- Lighthouse 11.2.0
- 접근성 개선
- 기타 주요 사항
Chrome 119
- 요소 > 스타일의 @property 섹션 개선
- 수정 가능한 @property 규칙
- 잘못된 @속성 규칙과 관련된 문제가 보고됨
- 에뮬레이션할 기기 목록 업데이트
- 소스의 스크립트 태그에 인라인 JSON을 예쁘게 인쇄
- 콘솔의 비공개 필드 자동 완성
- Lighthouse 11.1.0
- 접근성 개선
- 웹 SQL 지원 중단
- 애플리케이션 > 매니페스트의 스크린샷 가로세로 비율 유효성 검사
- 기타 주요 사항
Chrome 118
- 요소 > 스타일의 맞춤 속성을 위한 새로운 섹션
- 더 많은 지역 재정의 개선
- 향상된 검색
- 개선된 소스 패널
- Sources 패널의 간소화된 작업공간
- Sources에서 창 재정렬
- 더 많은 스크립트 유형의 구문 강조 표시 및 프리미팅
- 선호하는 투명도 미디어 기능 에뮬레이션
- Lighthouse 11
- 접근성 개선
- 기타 주요 사항
Chrome 117
- 네트워크 패널 개선
- 로컬에서 웹 콘텐츠를 더욱 빠르게 재정의
- XHR 및 가져오기 요청 콘텐츠 재정의
- Chrome 확장 프로그램 요청 숨기기
- 사람이 읽을 수 있는 HTTP 상태 코드
Chrome 116
- 누락된 스타일시트 디버깅 개선
- 요소 > 스타일 > 이징 편집기에서 선형 타이밍 지원
- 스토리지 버킷 지원 및 메타데이터 뷰
- Lighthouse 10.3.0
- 접근성: 키보드 명령어 및 화면 읽기 개선
- 기타 주요 사항
Chrome 115
- 요소 개선
- 새 CSS 하위 그리드 배지
- 도움말의 선택기 특수성
- 도움말의 맞춤 CSS 속성 값
- 소스 개선
- CSS 구문 강조표시
- 조건부 중단점 설정 단축키
- 애플리케이션 > 이탈 추적 완화
- Lighthouse 10.2.0
- 기본적으로 콘텐츠 스크립트 무시
- 네트워크 > 응답 개선
- 기타 주요 사항
Chrome 114
- WebAssembly 디버깅 지원
- Wasm 앱의 스테핑 동작 개선
- 요소 패널 및 문제 탭을 사용한 자동 완성 디버그
- 녹음기의 어설션
- Lighthouse 10.1.1
- 성능 향상
- performance.mark()가 성능 > 타이밍에서 마우스를 가져가면 타이밍을 표시함
- profile() 명령어가 Performance > Main을 채웁니다.
- 느린 사용자 상호작용에 대한 경고
- 웹 바이탈 업데이트
- JavaScript 프로파일러 지원 중단: 3단계
- 기타 주요 사항
Chrome 113
- 네트워크 응답 헤더 재정의
- Nuxt, Vite, Rollup 디버깅 개선사항
- 요소 > 스타일의 CSS 개선
- 잘못된 CSS 속성 및 값
- 애니메이션 약식 속성의 키프레임 링크
- 새 콘솔 설정: Enter 입력 시 자동 완성
- 작성된 파일을 강조하는 명령어 메뉴
- JavaScript 프로파일러 지원 중단: 2단계
- 기타 주요 사항
Chrome 112
- 녹음기 업데이트
- 녹음기 재생 확장 프로그램
- 피어스 선택기로 기록
- Lighthouse 분석을 사용하여 녹화 파일을 Puppeteer 스크립트로 내보내기
- 녹음기용 확장 프로그램 다운로드
- 요소 > 스타일 업데이트
- 스타일 창의 CSS 문서
- CSS 중첩 지원
- 콘솔에서 로그 지점 및 조건부 중단점 표시하기
- 디버깅 중에 관련 없는 스크립트 무시
- JavaScript 프로파일러 지원 중단 시작됨
- 대비 감소 에뮬레이션
- Lighthouse 10
- 기타 주요 사항
Chrome 111
- 스타일 창으로 HD 색상 디버깅
- 향상된 중단점 UX
- 맞춤설정 가능한 녹음기 단축키
- Angular를 위한 향상된 구문 강조표시
- Application 패널에서 캐시 재구성
- 기타 주요 사항
Chrome 110
- 새로고침 시 성능 패널 삭제
- 녹음기 업데이트
- 녹음기에서 사용자 플로우 코드 보기 및 강조표시
- 녹음 선택기 유형 맞춤설정
- 녹화 중에 사용자 흐름 수정
- 자동 인플레이스 프리티트 프린트
- Vue, SCSS 등을 위한 향상된 구문 강조표시 및 인라인 미리보기
- 콘솔의 인체공학적이고 일관된 자동 완성
- 기타 주요 사항
Chrome 109
- 녹음기: 단계 옵션으로 복사, 인페이지 재생, 단계의 컨텍스트 메뉴
- 성능 기록에 실제 함수 이름 표시
- 콘솔 및 소스 패널의 새로운 단축키
- 향상된 자바스크립트 디버깅
- 기타 주요 사항
- [실험용] 중단점 관리 UX 개선
- [실험용] 자동 전면 프리티 프린트
Chrome 108
Chrome 107
- DevTools에서 단축키 맞춤설정
- 단축키로 밝은 테마와 어두운 테마 전환
- Memory Inspector에서 C/C++ 객체 강조표시
- HAR 가져오기를 위한 전체 개시자 정보 지원
Enter
키를 누른 후 DOM 검색 시작align-content
CSS Flexbox 속성의start
및end
아이콘 표시- 기타 주요 사항
Chrome 106
- Sourceed(소스) 패널에서 Authored(작성됨 / 배포됨)별로 파일 그룹화하기
- 비동기 작업을 위해 연결된 스택 트레이스
- 알려진 서드 파티 스크립트 자동 무시
- 디버깅 중 호출 스택 개선
- 소스 패널에서 무시 목록에 있는 소스 숨기기
- 명령 메뉴에서 무시 목록에 포함된 파일 숨기기
- 성능 패널의 새로운 상호작용 트랙
- 실적 통계 패널의 LCP 타이밍 분석
- Recorder 패널에서 녹음 파일의 기본 이름 자동 생성
- 기타 주요 사항
Chrome 105
- 녹음기에서 단계별 재생
- Recorder 패널에서 마우스오버 이벤트 지원
- 성능 통계 패널의 최대 콘텐츠 렌더링 시간 (LCP)
- 텍스트 플래시 (FOIT, FOUT)를 레이아웃 변경의 잠재적 근본 원인으로 식별
- 매니페스트 창의 프로토콜 핸들러
- 요소 패널의 최상위 레이어 배지
- 런타임에 Wasm 디버깅 정보 연결
- 디버깅 중 실시간 편집 지원
- 스타일 창에서 규칙의 @범위 보기 및 수정
- 소스 맵 개선
- 기타 주요 사항
Chrome 104
- 디버깅 중에 프레임 다시 시작
- Recorder 패널의 느린 재생 옵션
- Recorder 패널의 확장 프로그램 빌드
- Sourceed(소스) 패널에서 Authored(작성됨 / 배포됨)별로 파일 그룹화하기
- 성능 통계 패널의 신규 사용자 시간 추적
- 요소의 할당된 슬롯 표시
- 성능 기록의 하드웨어 동시 실행 시뮬레이션
- CSS 변수를 자동 완성할 때 색상이 아닌 값 미리보기
- 뒤로-앞으로 캐시 창에서 차단 프레임 식별
- JavaScript 객체의 자동 완성 추천 개선
- 소스 맵 개선사항
- 기타 주요 사항
Chrome 103
- Recorder 패널에서 더블클릭 및 마우스 오른쪽 버튼 클릭 이벤트 캡처
- Lighthouse 패널의 새로운 기간 및 스냅샷 모드
- 실적 통계 패널의 확대/축소 제어 개선
- 공연 녹화본 삭제 확인
- 요소 패널에서 창 재정렬하기
- 브라우저 외부에서 색상 선택
- 디버깅 중 개선된 인라인 값 미리보기
- 가상 인증자를 위한 대형 blob 지원
- Sources 패널의 새로운 단축키
- 소스 맵 개선사항
Chrome 102
- 미리보기 기능: 새로운 성능 통계 패널
- 밝은 테마와 어두운 테마를 에뮬레이션하는 새로운 단축키
- 네트워크 미리보기 탭의 보안 강화
- 중단점에서 새로고침 개선
- 콘솔 업데이트
- 시작 시 사용자 플로우 기록 취소
- 스타일 창에 상속된 강조 유사 요소 표시
- 기타 주요 사항
- [실험용] CSS 변경사항 복사
- [실험용] 브라우저 외부에서 색상 선택
Chrome 101
- 기록된 사용자 흐름을 JSON 파일로 가져오기 및 내보내기
- Styles 창에서 캐스케이드 레이어 보기
hwb()
색상 함수 지원- 사유지 표시 개선
- 기타 주요 사항
- [실험용] Lighthouse 패널의 새로운 기간 및 스냅샷 모드
Chrome 100
- Styles 창에서 규칙의 @supports 보기 및 수정하기
- 기본으로 공통 선택기 지원
- 녹음 선택기 맞춤설정
- 녹음 파일 이름 바꾸기
- 마우스 오버 시 클래스/함수 속성 미리보기
- Performance 패널에 부분적으로 표시된 프레임
- 기타 주요 사항
Chrome 99
- WebSocket 요청 제한
- Application 패널의 새로운 Reporting API 창
- Recorder 패널에서 요소가 표시되거나 클릭될 때까지 대기 지원
- 콘솔 스타일 지정, 형식 지정, 필터링 개선
- 소스 맵 파일로 Chrome 확장 프로그램 디버그
- Sources 패널에서 개선된 소스 폴더 트리
- Sources 패널에 작업자 소스 파일 표시
- Chrome의 자동 어두운 테마 업데이트
- 터치하기 쉬운 색상 선택 도구와 분할 창
- 기타 주요 사항
Chrome 98
- 미리보기 기능: 전체 페이지 접근성 트리
- 변경사항 탭에서 더욱 정확한 변경사항 확인
- 사용자 플로우 기록 제한 시간 늘리기
- 뒤로-앞으로 캐시 탭으로 페이지를 캐시할 수 있는지 확인하기
- 새 속성 창 필터
- CSS 강제 색상 미디어 기능 에뮬레이션
- 마우스 오버 명령어 시 눈금자 표시
- Flexbox 편집기에서
row-reverse
및column-reverse
지원 - XHR을 다시 재생하고 모든 검색결과를 펼치는 새로운 단축키
- Lighthouse 패널의 Lighthouse 9
- 개선된 소스 패널
- 기타 주요 사항
- [실험용] Reporting API 창의 엔드포인트
Chrome 97
Chrome 96
- 미리보기 기능: 새로운 CSS 개요 패널
- CSS 길이 편집 및 복사 환경 복원 및 개선
- CSS 선호 대비 미디어 기능 에뮬레이션
- Chrome의 자동 어두운 테마 기능 에뮬레이션
- 스타일 창에서 선언을 자바스크립트로 복사
- Network 패널의 새 페이로드 탭
- 속성 창의 속성 표시 개선
- 콘솔에서 CORS 오류를 숨기는 옵션
- Console에서 적절한
Intl
객체 미리보기 및 평가 - 일관된 비동기 스택 트레이스
- Console 사이드바 유지
- Application 패널에서 지원 중단된 애플리케이션 캐시 창
- [실험용] Application 패널의 새로운 Reporting API 창
Chrome 95
- 새로운 CSS 길이 작성 도구
- 문제 탭에서 문제 숨기기
- 속성 표시 개선
- Lighthouse 패널의 Lighthouse 8.4
- Sources 패널의 스니펫 정렬
- 번역된 출시 노트 및 번역 버그 신고로 연결되는 새로운 링크
- DevTools 명령어 메뉴의 UI 개선
Chrome 94
- 원하는 언어로 DevTools 사용
- 기기 목록의 새 Nest Hub 기기
- 프레임 세부정보 뷰의 오리진 트라이얼
- 새로운 CSS 컨테이너 쿼리 배지
- 네트워크 필터를 반전하는 새로운 체크박스
- Console 사이드바 지원 중단 예정
- 문제 탭과 네트워크 패널에 원시
Set-Cookies
헤더 표시 - Console에서 자체 속성으로 일관된 디스플레이 네이티브 접근자
- #sourceURL을 사용한 인라인 스크립트의 적절한 오류 스택 추적
- Computed 창에서 색상 형식 변경
- 맞춤 도움말을 기본 HTML 도움말로 대체
- [실험용] 문제 탭에서 문제 숨기기
Chrome 93
- Styles 창에서 수정 가능한 CSS 컨테이너 쿼리
- Network(네트워크) 패널에서 웹 번들 미리보기
- Attribution Reporting API 디버깅
- Console의 문자열 처리 개선
- CORS 디버깅 개선
- Lighthouse 8.1
- 매니페스트 창의 새로운 메모 URL
- 고정된 CSS 일치 선택기
- Network(네트워크) 패널에서 JSON 응답 정리
Chrome 92
- CSS 그리드 편집기
- Console에서
const
재선언 지원 - 소스 순서 뷰어
- 프레임 세부정보를 볼 수 있는 새로운 단축키
- 향상된 CORS 디버깅 지원
- XHR 라벨의 이름을 Fetch/XHR로 변경
- Network(네트워크) 패널의 Wasm 리소스 유형 필터링
- 네트워크 조건 탭의 기기에 대한 사용자 에이전트 클라이언트 힌트
- 문제 탭에서 쿼크 모드 문제 신고하기
- 성능 패널에 계산 교차 포함
- Lighthouse 패널의 Lighthouse 7.5
- 호출 스택에서 '프레임 다시 시작' 컨텍스트 메뉴가 지원 중단됨
- [실험용] 프로토콜 모니터
- [실험용] Puppeteer 녹음기
Chrome 91
- 웹 바이탈 정보 팝업
- 새로운 메모리 검사기
- CSS 스크롤 스냅 시각화
- 새 배지 설정 창
- 가로세로 비율 정보를 포함한 향상된 이미지 미리보기
Content-Encoding
구성 옵션이 있는 새 네트워크 조건 버튼- 계산된 값을 보는 단축키
accent-color
키워드- 색상 및 아이콘을 사용하여 문제 유형 분류
- 신뢰 토큰 삭제
- 프레임 세부정보 뷰에서 차단된 기능
- 실험 설정에서 실험 필터링하기
- Cache Storage 창의 새
Vary Header
열 - JavaScript 비공개 브랜드 확인 지원
- 중단점 디버깅 지원 개선
[]
표기법으로 마우스 오버 미리보기 지원- HTML 파일 개요 개선
- Wasm 디버깅을 위한 적절한 오류 스택 트레이스
Chrome 90
- 새로운 CSS Flexbox 디버깅 도구
- 새로운 코어 웹 바이탈 오버레이
- 콘솔 상태 표시줄로 문제 수가 이동됨
- 신뢰할 수 있는 웹 활동 문제 신고하기
- Console에서 문자열의 형식을 (유효한) 자바스크립트 문자열 리터럴로 지정
- Application 패널의 새로운 트러스트 토큰 창
- CSS 색상 영역 미디어 기능 에뮬레이션
- 향상된 프로그레시브 웹 앱 도구
- Network 패널의 새
Remote Address Space
열 - 성능 개선
- 프레임 세부정보 뷰에 허용되는 기능/허용되지 않는 기능 표시
- Cookies(쿠키) 창의 새로운
SameParty
열 - 비표준
fn.displayName
지원 중단 - 설정 메뉴의
Don't show Chrome Data Saver warning
지원 중단 - [실험용] 문제 탭의 저대비 문제 자동 신고
- [실험용] 요소 패널의 전체 접근성 트리 보기
Chrome 89
- 신뢰할 수 있는 유형 위반 디버깅 지원
- 표시 영역을 벗어난 노드 스크린샷 캡처
- 네트워크 요청의 새로운 신뢰 토큰 탭
- Lighthouse 패널의 Lighthouse 7
- CSS
:target
상태 강제 지원 - 요소 복제를 위한 새로운 바로가기
- 맞춤 CSS 속성용 색상 선택 도구
- CSS 속성을 복사하는 새로운 단축키
- URL 디코딩된 쿠키를 표시하는 새로운 옵션
- 표시된 쿠키만 삭제
- 스토리지 창에서 서드 파티 쿠키를 삭제하는 새로운 옵션
- 맞춤 기기용 사용자 에이전트 클라이언트 힌트 수정
- '네트워크 로그 기록' 설정 유지
- 네트워크 패널에서 WebTransport 연결 보기
- 'Online'의 이름이 'No throttling'으로 변경됨
- 콘솔, 소스 패널, 스타일 창의 새로운 복사 옵션
- 프레임 세부정보 뷰의 새로운 서비스 워커 정보
- 프레임 세부정보 뷰의 메모리 정보 측정
- Issue(문제) 탭에서 의견 보내기
- 성능 패널의 드롭된 프레임
- 기기 모드에서 폴더블 및 듀얼 화면 에뮬레이션
- [실험용] Puppeteer Recorder로 브라우저 테스트 자동화
- [실험용] 스타일 창의 글꼴 편집기
- [실험용] CSS Flexbox 디버깅 도구
- [실험용] 새 CSP 위반 탭
- [실험용] 새로운 색상 대비 계산 - 고급 인지 대비 알고리즘 (APCA)
Chrome 88
- DevTools 시작 속도 향상
- 새로운 CSS 각도 시각화 도구
- 지원되지 않는 이미지 유형 에뮬레이션
- Storage 창에서 스토리지 할당량 크기 시뮬레이션하기
- 성능 패널의 새로운 웹 바이탈 레인
- Network 패널에서 CORS 오류 보고
- 프레임 세부정보 뷰의 교차 출처 격리 정보
- 프레임 세부정보 뷰의 새로운 웹 작업자 정보
- 열린 창의 오프너 프레임 세부정보 표시
- 서비스 워커 창에서 네트워크 패널 열기
- 속성 값 복사
- 네트워크 시작자의 스택 트레이스 복사
- 마우스 오버 시 Wasm 변수 값 미리보기
- 콘솔에서 Wasm 변수 평가
- 파일/메모리 크기에 대한 일관된 측정 단위
- 요소 패널에서 유사 요소 강조표시하기
- [실험용] CSS Flexbox 디버깅 도구
- [실험용] 코드 단축키 맞춤설정
Chrome 87
- 새로운 CSS 그리드 디버깅 도구
- 새 WebAuthn 탭
- 상단 및 하단 패널 간 도구 이동
- Styles 창의 새로운 계산된 사이드바 창
- Computed 창에서 CSS 속성 그룹화
- Lighthouse 패널의 Lighthouse 6.3
- 시간 섹션의
performance.mark()
이벤트 - Network(네트워크) 패널의 새로운
resource-type
및url
필터 - 프레임 세부정보 뷰 업데이트
- 도구 더보기 메뉴의
Settings
지원 중단 - [실험용] CSS 개요 패널에서 색상 대비 문제 보기 및 수정
- [실험용] DevTools에서 단축키 맞춤설정
Chrome 86
- New Media(새 미디어) 패널
- 요소 패널 컨텍스트 메뉴를 사용하여 노드 스크린샷 캡처
- 문제 탭 업데이트
- 누락된 로컬 글꼴 에뮬레이션
- 비활성 사용자 에뮬레이션
prefers-reduced-data
에뮬레이션- 새로운 JavaScript 기능 지원
- Lighthouse 패널의 Lighthouse 6.2
- 서비스 워커 창의 '기타 출처' 목록 지원 중단
- 필터링된 항목의 적용 범위 요약 표시하기
- Application 패널의 새 프레임 세부정보 뷰
- 스타일 창에서 액세스 가능한 색상 제안
- 요소 패널의 속성 창 복구
- Network 패널에 표시되는 사람이 읽을 수 있는
X-Client-Data
헤더 값 - 스타일 창에서 맞춤 글꼴 자동 완성
- 네트워크 패널에 리소스 유형을 일관되게 표시
- 요소 및 네트워크 패널의 지우기 버튼
Chrome 85
- CSS-in-JS 프레임워크의 스타일 수정
- Lighthouse 패널의 Lighthouse 6
- 첫 번째 의미 있는 페인트 (FMP) 지원 중단
- 새로운 JavaScript 기능 지원
- 매니페스트 창의 새로운 앱 바로가기 경고
- Timing 탭의 서비스 워커
respondWith
이벤트 - Computed 창의 일관된 표시
- WebAssembly 파일의 바이트 코드 오프셋
- Sources 패널에서 줄별로 복사 및 잘라내기
- Console 설정 업데이트
- 성능 패널 업데이트
- 중단점, 조건부 중단점, 로그 지점의 새로운 아이콘
Chrome 84
- 새로운 문제 탭을 통한 사이트 문제 해결
- 검사 모드 도움말에서 접근성 정보 보기
- 성능 패널 업데이트
- Console의 보다 정확한 Promise 용어
- 스타일 창 업데이트
- 요소 패널의 속성 창 지원 중단
- 매니페스트 창에서 앱 바로가기 지원
Chrome 83
- 시력 결함 에뮬레이션
- 언어 에뮬레이션
- 교차 출처 삽입 정책 (COEP) 디버깅
- 중단점, 조건부 중단점, 로그 지점의 새로운 아이콘
- 특정 쿠키를 설정하는 네트워크 요청 보기
- 명령 메뉴에서 왼쪽에 고정
- 기본 메뉴의 설정 옵션이 이동됨
- 감사 패널이 Lighthouse 패널로 표시됨
- 폴더의 모든 로컬 재정의 삭제
- 긴 작업 UI 업데이트
- 매니페스트 창에서 마스크 가능한 아이콘 지원
Chrome 82
Chrome 81
- 기기 모드에서 Moto G4 지원
- 쿠키 관련 업데이트
- 더 정확한 웹 앱 매니페스트 아이콘
- CSS
content
속성 위로 마우스를 가져가 이스케이프 처리되지 않은 값 확인 - Console의 소스 맵 오류
- 파일 끝을 지나는 스크롤 사용 중지 설정
Chrome 80
- Console에서
let
및class
재선언 지원 - WebAssembly 디버깅 개선
- 'Initiator'(시작자) 탭에서 Initiator Chains(시작자 체인 요청)
- 개요에서 선택한 네트워크 요청 강조 표시
- Network 패널의 URL 및 경로 열
- 업데이트된 사용자 에이전트 문자열
- 새로운 감사 패널 구성 UI
- 함수별 또는 블록별 코드 적용 범위 모드
- 이제 코드 적용 범위가 페이지 새로고침으로 시작되어야 함
Chrome 79
- 쿠키가 차단된 이유 디버그
- 쿠키 값 보기
- 다양한 선호 색상 구성표와 선호하는 색상 구성 선호도를 시뮬레이션합니다.
- 코드 적용 범위 업데이트
- 네트워크 리소스가 요청된 이유 디버그
- 콘솔 및 소스 패널이 들여쓰기 환경설정을 다시 따름
- 커서 탐색을 위한 새로운 단축키
Chrome 78
- 감사 패널의 멀티 클라이언트 지원
- 결제 핸들러 디버깅
- 감사 패널의 Lighthouse 5.2
- Performance 패널의 최대 콘텐츠 렌더링 시간
- 기본 메뉴에서 DevTools 문제 신고
Chrome 77
- 요소 스타일 복사
- 레이아웃 변경 시각화
- 감사 패널의 Lighthouse 5.1
- OS 테마 동기화
- Breakpoint Editor를 여는 단축키
- 네트워크 패널에서 캐시 미리 가져오기
- 객체 보기 시 비공개 속성
- Application 패널의 알림 및 푸시 메시지
Chrome 76
- CSS 값으로 자동 완성
- 네트워크 설정을 위한 새로운 UI
- HAR 내보내기의 WebSocket 메시지
- HAR 가져오기 및 내보내기 버튼
- 실시간 메모리 사용량
- 서비스 워커 등록 포트 번호
- 백그라운드 가져오기 및 백그라운드 동기화 이벤트 검사
- Firefox용 Puppeteer
Chrome 75
- CSS 함수 자동 완성 시 중요한 사전 설정
- 명령 메뉴에서 사이트 데이터 삭제
- 모든 IndexedDB 데이터베이스 보기
- 마우스 오버 시 리소스의 압축되지 않은 크기 보기
- Breakpoints 창의 인라인 중단점
- IndexedDB 및 캐시 리소스 수
- 상세 검사 도움말 사용 중지 설정
- 편집기에서 탭 들여쓰기 전환을 위한 설정
Chrome 74
- CSS 속성의 영향을 받는 모든 노드 강조표시
- 감사 패널의 Lighthouse v4
- WebSocket 바이너리 메시지 뷰어
- 명령 메뉴에서 영역 스크린샷 캡처
- Network 패널의 서비스 워커 필터
- 성능 패널 업데이트
- 성능 패널 기록의 장기 작업
- Timing 섹션의 첫 번째 페인트
- 보너스 팁: RGB 및 HSL 색상 코드 보기 단축키 (동영상)
Chrome 73
- 로그 지점
- 검사 모드의 자세한 도움말
- 코드 적용 범위 데이터 내보내기
- 키보드로 콘솔 탐색
- 색상 선택 도구의 AAA 명암비 선
- 맞춤 위치정보 재정의 저장
- 코드 폴딩
- 프레임 탭 이름이 메시지 탭으로 변경됨
- 보너스 팁: 속성별로 네트워크 패널 필터링 (동영상)
Chrome 72
- 성능 패널에서 성능 측정항목 시각화
- DOM 트리에서 텍스트 노드 강조 표시
- DOM 노드에 JS 경로 복사
- 감사 패널 업데이트: JS 라이브러리와 명령 메뉴에서 감사 패널에 액세스하기 위한 새 키워드를 감지하는 새 감사를 포함합니다.
- 보너스 도움말: Device Mode를 사용하여 미디어 쿼리 검사 (동영상)
Chrome 71
- 실시간 표현 결과 위로 마우스를 가져가면 DOM 노드가 강조 표시됩니다.
- DOM 노드를 전역 변수로 저장
- 이제 HAR 가져오기 및 내보내기에 개시자 및 우선순위 정보 포함
- 기본 메뉴에서 명령어 메뉴에 액세스하기
- PIP 모드 중단점
- 보너스 팁:
monitorEvents()
를 사용하여 콘솔에서 노드의 실행된 이벤트 로깅 (동영상)
Chrome 70
- 콘솔의 Live Expressions
- 즉시 평가 중 DOM 노드 강조표시
- 성능 패널 최적화
- 더 안정적인 디버깅
- 명령 메뉴에서 네트워크 제한 사용 설정
- 조건부 중단점 자동 완성
- AudioContext 이벤트 중단
- ndb로 Node.js 앱 디버그
- 보너스 팁: User Timing API로 실제 사용자 상호작용 측정
Chrome 68
- 즉시 평가
- 인수 힌트
- 함수 자동 완성
- ES2017 키워드
- 감사 패널의 Lighthouse 3.0
- BigInt 지원
- Watch 창에 속성 경로 추가
- '타임스탬프 표시'가 설정으로 이동됨
- 보너스 팁: 잘 알려지지 않은 콘솔 방법 (동영상)
Chrome 67
- 모든 네트워크 헤더에서 검색
- CSS 변수 값 미리보기
- 가져오기로 복사
- 새로운 감사, 데스크톱 구성 옵션, trace 보기
- 무한 루프 중지
- 성능 탭의 사용자 시간
- 메모리 패널에 명확하게 나열된 JavaScript VM 인스턴스
- 네트워크 탭 이름이 페이지 탭으로 변경됨
- 어두운 테마 업데이트
- 보안 패널의 인증서 투명성 정보
- 성능 패널의 사이트 격리 기능
- 보너스 도움말: 레이어 패널 + 애니메이션 검사기 (동영상)
Chrome 66
- Network 패널의 블랙박스
- 기기 모드에서 확대/축소 자동 조정
- 미리보기 및 응답 탭의 예쁘게 인쇄하기
- 미리보기 탭에서 HTML 콘텐츠 미리보기
- HTML 내부 스타일에 대한 로컬 재정의 지원
- 보너스 팁: 이벤트 리스너 중단점을 더 유용하게 만들기 위한 블랙박스 프레임워크 스크립트
Chrome 65
- 로컬 재정의
- 새로운 접근성 도구
- 변경사항 탭
- 새로운 검색엔진 최적화 및 실적 감사
- 성능 패널의 여러 녹화 파일
- 비동기 코드로 작업자를 사용한 안정적인 코드 스테핑
- 보너스 팁: Puppeteer를 사용하여 DevTools 작업 자동화 (동영상)
Chrome 64
- 성능 모니터
- 콘솔 사이드바
- 유사한 Console 메시지 그룹화하기
- 보너스 팁: 마우스 오버 의사 클래스 전환 (동영상)
Chrome 63
- 멀티 클라이언트 원격 디버깅 지원
- Workspace 2.0
- 새 감사 4개
- 맞춤 데이터로 푸시 알림 시뮬레이션하기
- 맞춤 태그로 백그라운드 동기화 이벤트 트리거
- 보너스 도움말: 이벤트 리스너 중단점 (동영상)
Chrome 62
- 콘솔의 최상위 대기
- 새로운 스크린샷 워크플로
- CSS 그리드 강조표시
- 객체 쿼리를 위한 새로운 Console API
- 새로운 콘솔 필터
- Network 패널에서 하드 가져오기
- 미리보기 가능한 캐시 리소스
- 더 예측 가능한 캐시 디버깅
- 블록 수준 코드 적용 범위
Chrome 61
- 휴대기기 제한 시뮬레이션
- 저장용량 사용량 보기
- 서비스 워커가 응답을 캐시한 시점 보기
- 명령 메뉴에서 FPS 측정기 사용 설정
- 마우스휠 동작을 확대/축소 또는 스크롤로 설정
- ES6 모듈의 디버깅 지원
Chrome 60
- 새로운 감사 패널
- 서드 파티 배지
- 여기로 계속하기를 위한 새로운 동작
- 비동기식으로 전환
- Console에서 더 많은 정보를 제공하는 객체 미리보기
- Console에서 더 유익한 컨텍스트 선택
- 범위 탭의 실시간 업데이트
- 더 간단한 네트워크 제한 옵션
- 비동기 스택이 기본적으로 사용 설정됨