안녕하세요. Chrome 76의 Chrome DevTools에 포함된 새로운 기능은 다음과 같습니다.
CSS 값으로 자동 완성
DOM 노드에 스타일 선언을 추가할 때 선언 값을 선언 이름보다 기억하기가 더 쉬운 경우가 있습니다. 예를 들어 <p>
노드를 굵게 만들면 bold
값을 font-weight
라는 이름보다 더 쉽게 기억할 수 있습니다. 이제 Style 창의 자동 완성 UI가 CSS 값을 지원합니다. 원하는 키워드 값은 기억하지만 속성 이름은 기억나지 않는 경우 값을 입력해 보세요. 자동 완성을 사용하면 원하는 이름을 찾는 데 도움이 됩니다.
그림 1. bold
를 입력하면 스타일 창이 font-weight: bold
로 자동 완성됩니다.
Chromium 문제 #931145로 이 새로운 기능에 관한 의견을 보내주세요.
네트워크 설정을 위한 새로운 UI
이전에는 Network 패널에서 DevTools 창이 좁을 때 제한 메뉴와 같은 옵션에 연결할 수 없는 사용성 문제가 있었습니다. 이 문제를 해결하고 네트워크 패널을 깔끔하게 정돈하기 위해 덜 사용되는 옵션 몇 가지를 새로운 네트워크 설정 창 뒤로 이동했습니다.
그림 2. 네트워크 설정으로 이동합니다.
Use Large Request Rows, Group By Frame, Show Overview, Capture Screenshots 옵션을 네트워크 설정으로 이동했습니다. 그림 3은 이전 위치를 새 위치에 매핑합니다.
그림 3. 이전 위치를 새 위치로 매핑
Chromium 문제 #892969로 이 UI 변경사항에 관한 의견을 보내주세요.
HAR 내보내기의 WebSocket 메시지
동료와 네트워크 로그를 공유하기 위해 Network 패널에서 HAR 파일을 내보낼 때 이제 HAR 파일에 WebSocket 메시지가 포함됩니다. _webSocketMessages
속성은 커스텀 필드임을 나타내는 밑줄로 시작됩니다.
...
"_webSocketMessages": [
{
"type": "send",
"time": 1558730482.5071473,
"opcode": 1,
"data": "Hello, WebSockets!"
},
{
"type": "receive",
"time": 1558730482.5883863,
"opcode": 1,
"data": "Hello, WebSockets!"
}
]
...
Chromium 문제 #496006으로 이 새로운 기능에 관한 의견을 보내주세요.
HAR 가져오기 및 내보내기 버튼
새로운 Export All As HAR With Content 및 Import HAR File 버튼으로 네트워크 로그를 동료와 더 쉽게 공유하세요. HAR 가져오기 및 내보내기는 한동안 DevTools에 있었습니다. 새로운 변경사항은 검색 가능성이 커졌습니다.
그림 4. 새로운 HAR 버튼입니다.
Chromium 문제 #904585로 이 UI 변경사항에 관한 의견을 보내주세요.
실시간 총 메모리 사용량
이제 Memory 패널에 총 메모리 사용량이 실시간으로 표시됩니다.
도표 5. 메모리 패널 하단에 페이지가 총 43.4MB의 메모리를 사용 중인 것으로 표시됩니다. 209KB/s는 총 메모리 사용량이 초당 209KB 증가하고 있음을 나타냅니다.
실시간으로 메모리 사용량을 추적하려면 성능 모니터도 참고하세요.
Chromium 문제 #958177로 이 새로운 기능에 관한 의견을 보내주세요.
서비스 워커 등록 포트 번호
디버깅 중인 서비스 워커를 더 쉽게 추적할 수 있도록 이제 서비스 워커 창의 제목에 포트 번호가 포함됩니다.
그림 6. 서비스 워커 포트
Chromium 문제 #601286으로 이 UI 변경사항에 관한 의견을 보내주세요.
백그라운드 가져오기 및 백그라운드 동기화 이벤트 검사
Application 패널의 새로운 Background Services 섹션을 사용하여 백그라운드 가져오기 및 백그라운드 동기화 이벤트를 모니터링할 수 있습니다. 백그라운드 가져오기 및 백그라운드 동기화 이벤트가 백그라운드에서 발생한다는 점을 고려할 때 DevTools가 열려 있는 동안 DevTools가 백그라운드 가져오기 및 백그라운드 동기화 이벤트만 기록한 경우 그다지 유용하지 않을 수 있습니다. 따라서 기록을 시작하면 탭을 닫은 후, 그리고 Chrome을 닫은 후에도 백그라운드 가져오기 및 백그라운드 동기화 이벤트가 계속 기록됩니다.
Application 패널로 이동하고 Background Fetch 또는 Background Sync 탭을 열고 Record 를 클릭하여 이벤트 로깅을 시작합니다. 이벤트를 클릭하면 자세한 정보를 확인할 수 있습니다.
그림 7. Background Fetch 창 데모: Maxim Salnikov
그림 8. Background Sync 창
Chromium 문제 #927726으로 새로운 기능에 관한 의견을 보내주세요.
Firefox용 Puppeteer
Firefox용 Puppeteer는 Puppeteer API로 Firefox를 자동화할 수 있는 새로운 실험용 프로젝트입니다. 즉, 아래 동영상과 같이 이제 동일한 Node API를 사용하여 Firefox와 Chromium을 자동화할 수 있습니다.
node example.js
를 실행하면 Firefox가 열리고 page
텍스트가 Puppeteer 문서 사이트의 검색창에 삽입됩니다. 그런 다음 Chromium에서 동일한 작업이 반복됩니다.
Firefox용 Puppeteer 및 Puppeteer에 관해 자세히 알아보려면 Google I/O 2019에서 Joel과 Andrey의 Puppeteer 강연을 확인하세요. Firefox 공지는 4:05 무렵에 이루어집니다.
미리보기 채널 다운로드
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에서 더 유익한 컨텍스트 선택
- 범위 탭의 실시간 업데이트
- 더 간단한 네트워크 제한 옵션
- 비동기 스택이 기본적으로 사용 설정됨