네트워크 패널 개선
로컬에서 웹 콘텐츠를 더욱 빠르게 재정의할 수 있습니다.
이제 로컬 재정의 기능이 간소화되어 이에 액세스하지 않고도 Network 패널에서 원격 리소스의 응답 헤더와 웹 콘텐츠를 쉽게 모의 처리할 수 있습니다.
웹 콘텐츠를 재정의하려면 네트워크 패널을 열고 요청을 마우스 오른쪽 버튼으로 클릭한 다음 콘텐츠 재정의를 선택합니다.
로컬 재정의를 설정했지만 비활성화한 경우 DevTools가 이를 사용 설정합니다. 아직 설정하지 않았다면 DevTools가 상단의 작업 모음에 메시지를 표시합니다. 재정의를 저장할 폴더를 선택하고 DevTools가 해당 폴더에 액세스하도록 허용합니다.
재정의가 설정되면 DevTools는 소스 > 재정의 > 편집기를 사용하면 웹 콘텐츠를 재정의할 수 있습니다.
재정의된 리소스는 Network 패널에 로 표시됩니다. 아이콘 위로 마우스를 가져가면 재정의된 내용을 확인할 수 있습니다.
Chromium 문제: 1465785, 1470532, 1469359
XHR 및 가져오기 요청의 내용 재정의
이제 응답 헤더 외에도 XHR의 콘텐츠 및 가져오기 요청을 재정의할 수 있습니다. 이러한 재정의를 사용하면 백엔드와 API가 아직 준비되지 않은 경우에도 API 응답을 모의 처리하여 웹페이지를 디버그할 수 있습니다.
DevTools는 현재 이미지 (예: avif, png), 글꼴, 가져오기 및 XHR, 스크립트 (css 및 js), 문서 (html)와 같은 요청 유형에 대한 콘텐츠 재정의를 지원합니다. 이제 DevTools에서 지원되지 않는 유형에 대해 Override content 옵션을 비활성화합니다.
Chrome 확장 프로그램 요청 숨기기
작성한 코드에 집중하고 Chrome에 설치했을 수 있는 확장 프로그램에서 보낸 관련 없는 요청을 필터링할 수 있도록 Network 패널에 새로운 필터가 추가됩니다.
chrome-extension://
URL로 전송된 모든 요청을 필터링하려면 확장 프로그램 URL 숨기기를 선택합니다.
사람이 읽을 수 있는 HTTP 상태 코드
이제 요청 헤더의 상태 코드가 HTTP 상태 코드 옆에 사람이 읽을 수 있는 텍스트를 표시하므로 요청에 어떤 일이 발생했는지 더 빨리 파악할 수 있습니다.
요청 표에서 상태 코드 위로 마우스를 가져가면 동일한 텍스트가 표시됩니다.
Chromium 문제: 1153956
JSON 하위유형의 Pretty-print 응답
이제 application/[subtype]+json
MIME 하위유형 (예: ld+json
, hal+json
등)이 있는 요청의 Response 탭에서 응답을 올바르게 파싱하여 꾸밀 수 있습니다.
Chromium 문제: 406900
성능: 네트워크 이벤트의 가져오기 우선순위 변경사항 확인
이제 성능 패널에 네트워크 트랙의 이벤트 요약에 하나의 우선순위만이 아닌 초기 우선순위 및 (최종) 우선순위라는 두 개의 우선순위 필드가 표시됩니다. 이 추가 필드를 통해 이제 이벤트의 가져오기 우선순위가 변경되는지 확인하고 다운로드 순서를 조정할 수 있습니다. 자세한 내용은 Fetch Priority API로 리소스 로드 최적화를 참조하세요.
또한 대규모 요청 행 설정을 사용 설정한 상태에서 네트워크 패널의 우선순위 열에서 동일한 정보를 찾을 수 있습니다.
기본적으로 사용되는 소스 설정: 코드 접기 및 자동 파일 표시
설정 > 환경설정 > 이제 코드 폴딩 옵션이 기본적으로 사용 설정됩니다. 이 옵션을 사용하면 코드 블록을 접을 수 있습니다.
코드 블록을 접으려면 블록 시작 부분 옆에 있는 줄 번호 위로 마우스를 가져간 다음 접기 아이콘을 클릭합니다. {...}
를 클릭하여 블록을 다시 펼칩니다.
또한 설정 > 환경설정 > 사이드바에 파일 자동 표시도 이제 기본적으로 사용 설정됩니다.
이 설정을 사용하면 파일 트리가 소스 > 페이지: 탭을 전환할 때 편집기에 열려 있는 현재 파일을 선택합니다.
서드 파티 쿠키 문제 디버깅 개선
개인 정보 보호가 강화된 웹을 빌드하고 다른 브라우저의 업데이트와 동시에 Chrome은 개인 정보 보호 샌드박스 이니셔티브를 도입했습니다. 이 이니셔티브는 웹의 개인 정보 보호를 근본적으로 개선하고 서드 파티 쿠키를 더 이상 사용하지 않는 방식으로 건전한 광고 지원 웹을 유지할 수 있습니다. 개인 정보 보호 샌드박스는 변화에 편안하게 적응할 수 있도록 점진적인 단계적 지원 중단 타임라인을 갖추고 있습니다.
서드 파티 쿠키의 단계적 지원 중단 후에 Chrome이 어떻게 작동하는지 이미 테스트할 수 있습니다. 이렇게 하려면 --test-third-party-cookies-phaseout
플래그를 사용하여 명령줄에서 Chrome을 실행합니다. 이 플래그의 기능을 알아보려면 쿠키 디버깅을 참고하세요.
Chrome을 실행하는 방식 (플래그 유무와 관계없음)과 관계없이 이제 문제 탭에서 모든 신규 Chrome 사용자에게 서드 파티 쿠키 문제 포함 체크박스가 기본적으로 사용 설정되어 있으며 이에 따라 다음과 같은 보고서가 작성됩니다.
- 예정된 단계적 중단에 관한 브레이킹 체인지 경고
- 서드 파티 쿠키 관련 문제
기존 Chrome 사용자에게 예정된 단계적 중단에 관한 쿠키 경고를 확인하려면 이 체크박스를 선택하세요.
이를 테스트하려면 이 데모 페이지에서 쿠키를 검사하세요.
또한 Network 패널의 차단된 응답 쿠키 필터가 차단된 응답 쿠키만 표시된다는 점을 명확히 하기 위해 다른 표현으로 변경되었습니다.
Chromium 문제: 1458839, 1462693, 1466310
Application 패널에서 미리 로드 디버그
Chrome팀은 사용자가 이동할 가능성이 높은 향후 페이지에 완전한 사전 렌더링을 다시 지원합니다. 이를 디버그할 수 있도록 DevTools는 Application 패널에 Preloading 섹션을 추가합니다. 새로운 미리 가져오기 및 사전 렌더링('탐색 미리 로드'로 통칭)은 링크 기반 리소스 힌트가 아닌 Speculation Rules API를 사용합니다.
이 데모 페이지의 애플리케이션 > 미리 로드 섹션에서 다음을 검사할 수 있습니다.
- 예측 규칙: 현재 페이지에서 찾은 모든 규칙 집합을 나열합니다.
- 미리 로드: 규칙 집합에서 미리 가져온 URL과 사전 렌더링된 URL을 모두 나열합니다.
- 이 페이지에는 현재 페이지의 사전 렌더링된 상태가 나열됩니다.
자세한 내용은 예측 규칙 디버깅 전용 게시물을 참고하세요.
Chromium 문제: 1410709
새로운 색상
이미 DevTools의 디자인이 Chrome에 더 잘 어울리도록 새롭게 바뀐 것을 눈치채셨을 수도 있습니다. 기여 요인 중 하나는 새로운 색 구성표입니다.
이 버전 (117)은 여러 가지 개선된 UI 텍스트를 비롯하여 이미 언급하고 추가로 나열한 DevTools에 더 많은 UX 개선 사항을 제공합니다.
Chromium 문제: 1456677
Lighthouse 10.4.0
이제 Lighthouse 패널에서 Lighthouse 10.4.0을 실행합니다. 특히 이 버전에서는 다음에 관한 새로운 접근성 감사가 추가되었습니다.
예를 들면 다음과 같습니다.
변경사항의 전체 목록을 참고하세요. DevTools에서 Lighthouse 패널을 사용하는 기본적인 방법을 알아보려면 Lighthouse: 웹사이트 속도 최적화를 참고하세요.
Chromium 문제: 772558
DevTools용 C/C++ WebAssembly 디버깅 확장 프로그램이 이제 오픈소스로 제공됩니다.
DevTools용 C/C++ WebAssembly 디버깅 확장 프로그램이 이제 오픈소스로 제공되며 DevTools 프런트엔드 저장소에 있습니다. 이 확장 프로그램은 WebAssembly로 컴파일된 C++ 프로그램용 DevTools에서 디버깅 기능을 사용 설정합니다. 자세한 내용은 C/C++ WebAssembly 디버그를 참고하세요.
확장 프로그램을 빌드, 실행, 테스트하는 방법을 알아보고 자유롭게 참여해 주세요.
Chromium 문제: 1410709
기타 주요 정보
다음은 이번 출시에서 주목할 만한 수정사항과 개선사항입니다.
- CSS 중첩: 이제 Elements 패널에 중첩된 하위 요소의 전체 선택기 체인이 표시됩니다. (1172985)
- 애플리케이션 > 이제 매니페스트에 매니페스트에
display_override
값이 있는지 확인하고 관련 문서 링크를 제공하는 창 컨트롤 오버레이 섹션이 있습니다. - 소스 > 이제 페이지 트리에서 다음을 포함하되 이에 국한되지 않는 작업을 수행합니다 (1442863).
<ph type="x-smartling-placeholder">
- </ph>
- 모든 콘텐츠가 무시 목록에 포함된 경우 폴더가 회색으로 표시됩니다.
- 모든 콘텐츠가 소스 맵에 있는 경우 폴더를 주황색으로 지정합니다.
- 성능: 이제 녹화를 시작하면 캡처 설정이 자동으로 숨겨집니다 (1455498).
- 출처 > 편집기에서 Ctrl + Ctrl 동작 (Win)과 Ctrl + Ctrl (MacOs) (1468208)를 복원했습니다.
- 애니메이션 > 모두 일시중지 전환 버튼이 이제 페이지 로드 시 상태를 유지합니다 (1446046).
- 애플리케이션 > 스토리지 > 캐시 저장소가 애플리케이션 > 스토리지 > 캐시 섹션 (1462622).
- 일부 UI 텍스트와 도움말이 개선되었습니다. 하드웨어 동시 실행 도움말, 네트워크 필터 텍스트 및 기본 메뉴 옵션, 애플리케이션 트리 보기의 대문자, 네트워크 > 헤더 텍스트, 소스 > 재정의 및 파일 시스템 텍스트.
새로운 실험 기능
새 렌더링 에뮬레이션: prefers-reduced-transparency
웹사이트 사용자는 기기에 새로운 실험용 prefers-reduced-transparency
CSS 미디어 기능을 사용 설정하여 투명 효과를 줄이기 위해 선호도를 표시할 수 있습니다. 웹사이트의 접근성을 높이기 위해 이 환경설정을 고려해 볼 수도 있습니다. 이제 렌더링 창 탭에서 prefers-reduced-transparency: reduce
설정을 에뮬레이션할 수 있으므로 솔루션의 프로토타입을 제작하고 이 경우 웹사이트가 어떻게 동작하는지 테스트할 수 있습니다.
Chrome에서 이 기능을 테스트하려면 chrome://flags
에서 실험용 웹 플랫폼 기능을 사용 설정하세요.
Chromium 문제: 1424879
향상된 프로토콜 모니터
Chrome DevTools는 CDP (Chrome DevTools 프로토콜)를 사용하여 Chrome 브라우저를 계측, 검사, 디버그, 프로파일링합니다. Chromium 또는 DevTools 개발자인 경우 프로토콜 모니터를 통해 DevTools에서 생성한 모든 CDP 요청 및 응답을 확인하고 CDP 명령어를 전송할 수 있습니다.
CDP 명령어를 더 쉽게 구성하고 전송할 수 있는 새로운 인터페이스가 프로토콜 모니터에 추가되었습니다. 이제 문서에서 명령어와 매개변수를 검색할 필요 없이 DevTools가 추천해 줍니다.
프로토콜 모니터 창 탭의 오른쪽 하단에서 CDP 명령어 편집기 표시를 클릭하여 타겟을 선택하고 명령어를 입력하기 시작합니다. 필요한 경우 추천 명령어 중 하나를 선택하고 매개변수 값을 지정한 다음 명령어 전송 (Ctrl/Cmd + Enter)을 클릭합니다.
Chromium 문제: 1469345
미리보기 채널 다운로드
Chrome Canary, Dev 또는 베타를 기본 개발 브라우저로 사용해 보세요. 이러한 미리보기 채널을 통해 최신 DevTools 기능에 액세스하고, 최첨단 웹 플랫폼 API를 테스트하고, 사용자보다 먼저 사이트에서 문제를 발견할 수 있습니다.
Chrome DevTools 팀에 문의하기
다음 옵션을 사용하여 게시물의 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 사항에 대해 논의하세요.
- crbug.com을 통해 제안이나 의견을 보내주세요.
- 옵션 더보기 >를 사용하여 DevTools 문제 신고 도움말 > DevTools에서 DevTools 문제를 신고합니다.
- @ChromeDevTools에서 트윗하세요.
- DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 도움말 YouTube 동영상에 의견을 남겨주세요.
DevTools의 새로운 기능
DevTools의 새로운 기능 시리즈에서 다룬 모든 내용 목록입니다.
- Recorder에서 Firefox용 Puppeteer로 내보내기 지원
- 성능 패널 개선사항
- 실시간 측정항목 관찰
- 네트워크 트랙의 검색 요청
- performance.mark 및 performance.measure 호출의 스택 트레이스 보기
- 자동 완성 패널에서 테스트 주소 데이터 사용하기
- 요소 패널 개선사항
- 특정 요소에 더 많은 상태 강제 적용
- 요소 > 이제 스타일이 더 많은 그리드 속성을 자동 완성합니다.
- Lighthouse 12.2.0
- 기타 주요 정보
- Gemini의 콘솔 인사이트가 대부분의 유럽 국가에서 제공될 예정입니다
- 성능 패널 업데이트
- 향상된 네트워크 트랙
- 확장성 API를 통한 성능 데이터 맞춤설정
- 타이밍 트랙의 세부정보
- Network 패널에 나열된 모든 요청 복사
- 이름이 지정된 HTML 태그로 더 빠른 힙 스냅샷 생성 및 복잡성 감소
- Animations 패널을 열어 애니메이션을 캡처하고 실시간으로 @keyframes 편집
- Lighthouse 12.1.0
- 접근성 개선
- 기타 주요 정보
- 요소 패널에서 CSS 앵커 위치 검사
- 소스 패널 개선사항
- '여기에서 일시중지하지 않음' 개선
- 새로운 스크롤 스냅 이벤트 리스너
- 네트워크 패널 개선
- 업데이트된 네트워크 제한 사전 설정
- HAR 형식의 맞춤 필드에 서비스 워커 정보 입력
- 성능 패널에서 WebSocket 이벤트 주고받기
- 기타 주요 정보
- 성능 패널 개선사항
- 업데이트된 트랙 구성 모드로 트랙 이동 및 숨기기
- Flame Chart에서 스크립트 무시
- CPU 20배 제한
- 실적 통계 패널 지원 중단
- 힙 스냅샷의 새로운 필터로 과도한 메모리 사용량 찾기
- 애플리케이션에서 스토리지 버킷 검사 > 스토리지
- 명령줄 플래그로 자체 XSS 경고 사용 중지
- Lighthouse 12.0.0
- 기타 주요 정보
- Gemini로 콘솔에서 오류 및 경고를 더 잘 이해
- 요소에서@position-try 규칙 지원 > 스타일
- 소스 패널 개선사항
- 자동 프리티 인쇄 및 괄호 닫기 구성
- 처리된 거부된 프라미스는 포착됨으로 인식됨
- 콘솔의 오류 원인
- 네트워크 패널 개선
- 조기 힌트 헤더 검사
- 폭포식 구조 열 숨기기
- 성능 패널 개선사항
- CSS 선택자 통계 캡처
- 순서 변경 및 트랙 숨기기
- 메모리 패널에서 보관자 무시
- Lighthouse 11.7.1
- 기타 주요 정보
- 새로운 자동 완성 패널
- WebRTC를 위한 향상된 네트워크 제한
- 애니메이션 패널에서 스크롤 기반 애니메이션 지원
- 요소에서 CSS 중첩 지원 개선 > 스타일
- 향상된 성능 패널
- Flame Chart에서 함수 및 그 하위 요소 숨기기
- 선택한 시작자에서 시작한 이벤트로의 화살표
- Lighthouse 11.6.0
- 메모리의 특수 카테고리를 위한 도움말 > 힙 스냅샷
- 응용 > 스토리지 업데이트
- 공유 저장공간에 사용된 바이트
- 웹 SQL 완전히 지원 중단됨
- 범위 패널 개선사항
- 레이어 패널이 지원 중단될 수 있음
- JavaScript 프로파일러 지원 중단: 4단계, 최종
- 기타 주요 정보
- 이스터 에그 찾기
- 요소 패널 업데이트
- 요소에서 포커스된 페이지 에뮬레이션 > 스타일
var()
대체의 색상 선택 도구, 각도 시계, 이징 편집기- CSS 길이 도구가 지원 중단됨
- 실적 > 기본 트랙
- 네트워크 패널 업데이트
- 네트워크의 지우기 버튼 및 검색 필터 > 이벤트 스트림 탭
- 네트워크의 서드 파티 쿠키에 대한 예외 사유가 포함된 툴팁 > 쿠키
- 소스에서 모든 중단점 사용 설정 및 사용 중지
- Node.js용 DevTools에서 로드된 스크립트 보기
- Lighthouse 11.5.0
- 접근성 개선
- 기타 주요 정보
- 녹음기 확장 프로그램의 공식 컬렉션 출시
- 네트워크 개선
- 상태 열에 실패 이유
- 개선된 문구 하위 메뉴
- 성능 개선
- 타임라인의 탐색경로
- 기본 트랙의 이벤트 개시자
- Node.js DevTools의 JavaScript VM 인스턴스 선택기 메뉴
- 소스의 새로운 단축키 및 명령어
- 요소 개선
- 이제 스타일에서 ::view-transition pseudo-element를 수정할 수 있습니다.
- 블록 컨테이너의 정렬 콘텐츠 속성 지원
- 에뮬레이션된 폴더블 기기의 상황 지원
- 동적 테마 설정
- 네트워크 및 애플리케이션 패널에 표시되는 서드 파티 쿠키의 단계적 지원 중단 경고
- Lighthouse 11.4.0
- 접근성 개선
- 기타 주요 정보
- 요소 개선
- 네트워크 패널의 간소화된 필터 표시줄
@font-palette-values
지원- 지원되는 사례: 다른 맞춤 속성의 대체로서의 맞춤 속성
- 소스 맵 지원 개선
- 성능 패널 개선사항
- 향상된 상호작용 트랙
- Bottom-Up, Call Tree, 이벤트 로그 탭에서 고급 필터링
- 소스 패널의 들여쓰기 마커
- 네트워크 패널에서 재정의된 헤더 및 콘텐츠에 대한 유용한 도움말
- 요청 차단 패턴을 추가하고 삭제하는 새 명령어 메뉴 옵션
- CSP 위반 실험 삭제됨
- Lighthouse 11.3.0
- 접근성 개선
- 기타 주요 정보
- 서드 파티 쿠키의 단계적 지원 중단
- 개인 정보 보호 샌드박스 분석 도구로 웹사이트 쿠키 분석
- 향상된 목록 무시
- node_modules의 기본 제외 패턴
- 이제 포착된 예외는 무시되지 않는 코드를 통해 포착되거나 전달되는 경우 포착된 예외가 실행을 중지합니다.
- 소스 맵에서
x_google_ignoreList
의 이름이ignoreList
로 변경됨 - 원격 디버깅 중 새로운 입력 모드 전환
- 이제 요소 패널에 #문서 노드 URL이 표시됨
- 애플리케이션 패널의 유효 콘텐츠 보안 정책
- 개선된 애니메이션 디버깅
- '이 코드를 신뢰할 수 있나요?' 소스의 대화상자 및 Console의 자체 XSS 경고
- 웹 작업자 및 Worklet의 이벤트 리스너 중단점
<audio>
및<video>
의 새 미디어 배지- 미리 로드 이름이 추측 로드로 변경됨
- Lighthouse 11.2.0
- 접근성 개선
- 기타 주요 정보
- 요소의 @property 섹션 개선 > 스타일
- 수정 가능한 @property 규칙
- 잘못된 @property 규칙 관련 문제가 보고됨
- 에뮬레이션할 기기 목록 업데이트
- 소스의 스크립트 태그에 인라인 JSON 프리티 인쇄
- 콘솔의 비공개 필드 자동 완성
- Lighthouse 11.1.0
- 접근성 개선
- 웹 SQL 지원 중단
- 애플리케이션의 스크린샷 가로세로 비율 유효성 검사 > 매니페스트
- 기타 주요 정보
- 요소의 맞춤 속성에 대한 새로운 섹션 > 스타일
- 더 많은 로컬 재정의 개선사항
- 향상된 검색 기능
- 개선된 소스 패널
- 소스 패널의 간소화된 작업공간
- Sources의 창 재정렬
- 더 많은 스크립트 유형을 위한 구문 강조 및 프리티 프린팅
- 투명도 낮음 미디어 기능 에뮬레이션
- 등대 11
- 접근성 개선
- 기타 주요 정보
- 네트워크 패널 개선
- 웹 콘텐츠를 로컬에서 더 빠르게 재정의
- XHR 및 가져오기 요청의 콘텐츠 재정의
- Chrome 확장 프로그램 요청 숨기기
- 사람이 읽을 수 있는 HTTP 상태 코드
- 기본적으로 사용 설정된 소스 설정: 코드 폴딩 및 자동 파일 표시
- 서드 파티 쿠키 문제 디버깅 개선
- 새로운 색상
- Lighthouse 10.4.0
- Application 패널에서 미리 로드 디버그
- DevTools용 C/C++ WebAssembly 디버깅 확장 프로그램이 이제 오픈소스로 제공됩니다.
- 기타 주요 정보
- (실험용) 새로운 렌더링 에뮬레이션: prefers-reduced-transparency
- (실험용) 향상된 프로토콜 모니터
- 누락된 스타일시트의 디버깅 개선
- 요소의 선형 타이밍 지원 > 스타일 > 이징 편집기
- 스토리지 버킷 지원 및 메타데이터 뷰
- Lighthouse 10.3.0
- 접근성: 키보드 명령어 및 개선된 화면 읽기
- 기타 주요 정보
- 요소 개선
- 새로운 CSS 하위 그리드 배지
- 도움말의 선택기 구체성
- 도움말의 맞춤 CSS 속성 값
- 소스 개선
- CSS 구문 강조표시
- 조건부 중단점 설정 단축키
- 응용 > 이탈 추적 감소
- Lighthouse 10.2.0
- 기본적으로 콘텐츠 스크립트 무시
- 네트워크 > 응답 개선
- 기타 주요 정보
- WebAssembly 디버깅 지원
- Wasm 앱의 단계별 동작 개선
- 요소 패널과 문제 탭을 사용하여 자동 완성 디버그
- 녹음기의 어설션
- Lighthouse 10.1.1
- 성능 향상
- performance.mark()에서 성능 > 마우스 오버 시 타이밍을 표시함 소요 시간
- profile() 명령어는 성능 > 기본
- 느린 사용자 상호작용에 대한 경고
- 웹 바이탈 업데이트
- JavaScript 프로파일러 지원 중단: 3단계
- 기타 주요 정보
- 네트워크 응답 헤더 재정의
- Nuxt, Vite, Rollup 디버깅 개선
- 요소의 CSS 개선 > 스타일
- 잘못된 CSS 속성 및 값
- 애니메이션 약식 속성의 키 프레임 링크
- 새 콘솔 설정: Enter 입력 시 자동 완성
- 명령어 메뉴에서 작성된 파일이 강조됨
- JavaScript 프로파일러 지원 중단: 2단계
- 기타 주요 정보
- 녹음기 업데이트
- 녹음기 재생 확장 프로그램
- 피어스 선택기로 기록
- Lighthouse 분석을 사용하여 녹음 파일을 Puppeteer 스크립트로 내보내기
- 녹음기 확장 프로그램 다운로드하기
- 요소 > 스타일 업데이트
- 스타일 창의 CSS 문서
- CSS 중첩 지원
- 콘솔에서 로그 지점 및 조건부 중단점 표시
- 디버깅 중에 관련 없는 스크립트 무시
- JavaScript 프로파일러 지원 중단 시작됨
- 명암 감소 에뮬레이션
- 등대 10
- 기타 주요 정보
- 스타일 창에서 HD 색상 디버깅
- 향상된 중단점 UX
- 맞춤설정 가능한 녹음기 단축키
- Angular의 구문 강조표시 개선
- Application 패널에서 캐시 재구성
- 기타 주요 정보
- 새로고침 시 성능 패널 지우기
- 녹음기 업데이트
- 녹음기에서 사용자 플로우의 코드 보기 및 강조 표시하기
- 녹음의 선택기 유형 맞춤설정
- 녹화 중 사용자 플로우 수정
- 자동 삽입 프리티 프린팅
- Vue, SCSS 등의 구문 강조표시 및 인라인 미리보기 개선
- 콘솔의 인체 공학적이고 일관된 자동 완성
- 기타 주요 정보
- 녹음기: 단계 옵션으로 복사, 인페이지 다시 재생, 단계의 컨텍스트 메뉴
- 공연 기록에 실제 함수 이름 표시
- 콘솔의 새로운 단축키 소스 패널
- 개선된 JavaScript 디버깅
- 기타 주요 정보
- [실험용] 중단점 관리 UX 개선
- [실험용] 자동 삽입 프리티 프린트
- 비활성 CSS 속성에 대한 힌트
- Recorder 패널에서 XPath 및 텍스트 선택기 자동 감지
- 쉼표로 구분된 표현식 단계별 안내
- 무시 목록 설정 개선
- 기타 주요 정보
- DevTools에서 단축키 맞춤설정
- 단축키로 밝은 테마와 어두운 테마 전환
- Memory Inspector에서 C/C++ 객체 강조표시
- HAR 가져오기의 전체 개시자 정보 지원
Enter
키를 누른 후 DOM 검색 시작align-content
CSS Flexbox 속성의start
및end
아이콘 표시- 기타 주요 정보
- 소스 패널에서 작성 / 배포별로 파일 그룹화
- 비동기 작업을 위해 연결된 스택 트레이스
- 알려진 서드 파티 스크립트를 자동으로 무시
- 디버깅 중 호출 스택 개선
- 소스 패널에서 무시 목록에 포함된 소스 숨기기
- 명령 메뉴에서 무시된 파일 숨기기
- 실적 패널의 새 상호작용 트랙
- 실적 통계 패널의 LCP 타이밍 분석
- Recorder 패널에서 녹음 파일의 기본 이름 자동 생성
- 기타 주요 정보
- 녹음기의 단계별 재생
- Recorder 패널에서 마우스오버 이벤트 지원
- 성능 통계 패널의 최대 콘텐츠 페인트 (LCP)
- 레이아웃 변경의 잠재적 근본 원인으로 텍스트 플래시 (FOIT, FOUT)를 파악합니다.
- 매니페스트 창의 프로토콜 핸들러
- 요소 패널의 최상위 레이어 배지
- 런타임 시 Wasm 디버깅 정보 첨부
- 디버깅 중 실시간 편집 지원
- 스타일 창의 규칙에서 @scope 보기 및 수정
- 소스 맵 개선사항
- 기타 주요 정보
- 디버깅 중에 프레임 다시 시작
- Recorder 패널의 느린 재생 옵션
- Recorder 패널의 확장 프로그램 빌드
- 소스 패널에서 작성 / 배포별로 파일 그룹화
- 실적 통계 패널의 새로운 사용자 시간 추적
- 요소의 할당된 슬롯 표시하기
- 성능 기록을 위한 하드웨어 동시 실행 시뮬레이션
- CSS 변수 자동 완성 시 색상이 아닌 값 미리보기
- 뒤로-앞으로 캐시 창에서 차단 프레임 식별
- JavaScript 객체의 자동 완성 추천 개선
- 소스 맵 개선사항
- 기타 주요 정보
- Recorder 패널에서 더블클릭 및 마우스 오른쪽 버튼 클릭 이벤트 캡처
- Lighthouse 패널의 새로운 기간 및 스냅샷 모드
- 실적 통계 패널의 확대/축소 제어 개선
- 공연 녹음 삭제 확인
- 요소 패널에서 창 재정렬
- 브라우저 외부에서 색상 선택
- 디버깅 중 인라인 값 미리보기 개선
- 가상 인증자를 위한 대형 blob 지원
- 소스 패널의 새로운 단축키
- 소스 맵 개선사항
- 미리보기 기능: 새로운 성능 통계 패널
- 밝은 테마와 어두운 테마를 에뮬레이션하는 새로운 단축키
- 네트워크 미리보기 탭의 보안 개선
- 중단점 새로고침 개선
- Console 업데이트
- 시작 시 사용자 플로우 녹화 취소하기
- 스타일 창에 상속된 강조표시 의사 요소 표시
- 기타 주요 정보
- [실험용] CSS 변경사항 복사
- [실험용] 브라우저 외부에서 색상 선택하기
- 기록된 사용자 플로우를 JSON 파일로 가져오고 내보내기
- 스타일 창에서 계단식 레이어 보기
hwb()
색상 함수 지원- 사유지 표시 개선
- 기타 주요 정보
- [실험용] Lighthouse 패널의 새로운 기간 및 스냅샷 모드
- 스타일 창의 규칙에서 @supports 보기 및 수정
- 기본적으로 일반 선택기 지원
- 녹화 선택기 맞춤설정
- 기록 이름 바꾸기
- 마우스 오버 시 클래스/함수 속성 미리보기
- 성능 패널에 부분적으로 표시된 프레임
- 기타 주요 정보
- WebSocket 요청 제한
- Application 패널의 새 Reporting API 창
- Recorder 패널에서 요소가 표시되거나 클릭할 수 있을 때까지 대기함
- 콘솔 스타일 지정, 형식 지정, 필터링 개선
- 소스 맵 파일로 Chrome 확장 프로그램 디버그
- 소스 패널의 소스 폴더 트리 개선
- Sources 패널에 작업자 소스 파일 표시
- Chrome의 자동 어두운 테마 업데이트
- 터치하기 쉬운 색상 선택 도구와 분할 창
- 기타 주요 정보
- 미리보기 기능: 전체 페이지 접근성 트리
- 변경사항 탭의 더 정확한 변경사항
- 사용자 플로우 기록에 더 긴 시간 제한 설정
- 뒤로-앞으로 캐시 탭을 사용하여 페이지를 캐시할 수 있는지 확인하기
- 새 속성 창 필터
- CSS 강제 색상 미디어 기능 에뮬레이션
- 마우스 오버 명령어 시 눈금자 표시
- Flexbox 편집기에서
row-reverse
및column-reverse
지원 - XHR을 재생하고 모든 검색결과를 펼치는 새로운 단축키
- Lighthouse 패널의 Lighthouse 9
- 개선된 소스 패널
- 기타 주요 정보
- [실험용] Reporting API 창의 엔드포인트
- 미리보기 기능: New Recorder 패널
- 기기 모드에서 기기 목록 새로고침
- HTML로 수정으로 자동 완성
- 개선된 코드 디버깅 환경
- 기기 간 DevTools 설정 동기화
- 미리보기 기능: 새로운 CSS 개요 패널
- CSS 길이 수정 및 복사 환경 복원 및 개선
- CSS 기본 대비 미디어 기능 에뮬레이션
- Chrome의 자동 어두운 테마 기능 에뮬레이션
- 스타일 창에서 선언을 JavaScript로 복사
- Network 패널의 새로운 페이로드 탭
- 속성 창의 속성 표시 개선
- 콘솔에서 CORS 오류를 숨기는 옵션
- Console에서 적절한
Intl
객체 미리보기 및 평가 - 일관된 비동기 스택 트레이스
- Console 사이드바 유지
- Application 패널의 지원 중단된 애플리케이션 캐시 창
- [실험용] Application 패널의 새로운 Reporting API 창
- 새로운 CSS 길이 작성 도구
- 문제 탭에서 문제 숨기기
- 숙박 시설 표시 개선
- Lighthouse 패널의 Lighthouse 8.4
- Sources 패널의 스니펫 정렬
- 번역된 출시 노트로 연결되는 새로운 링크 및 번역 버그 신고
- DevTools 명령어 메뉴의 UI 개선
- 선호하는 언어로 DevTools 사용
- 기기 목록에 표시되는 새로운 Nest Hub 기기
- 프레임 세부정보 뷰의 오리진 트라이얼
- 새로운 CSS 컨테이너 쿼리 배지
- 네트워크 필터를 반전하는 새로운 체크박스
- Console 사이드바 지원 중단 예정
- 문제 탭과 네트워크 패널에 원시
Set-Cookies
헤더 표시 - 콘솔에서 일관된 디스플레이 네이티브 접근자를 자체 속성으로 사용
- #sourceURL을 사용하여 인라인 스크립트의 적절한 오류 스택 트레이스
- Computed 창에서 색상 형식 변경
- 맞춤 도움말을 네이티브 HTML 도움말로 대체
- [실험용] 문제 탭에서 문제 숨기기
- 스타일 창에서 수정 가능한 CSS 컨테이너 쿼리
- 네트워크 패널의 웹 번들 미리보기
- Attribution Reporting API 디버깅
- 콘솔의 문자열 처리 개선
- CORS 디버깅 개선
- Lighthouse 8.1
- 매니페스트 창의 새로운 메모 URL
- 수정된 CSS 일치 선택기
- Network 패널에서 JSON 응답 사전 인쇄
- CSS 그리드 편집기
- Console에서
const
재선언 지원 - 소스 순서 뷰어
- 프레임 세부정보를 볼 수 있는 새로운 단축키
- 향상된 CORS 디버깅 지원
- XHR 라벨 이름을 Fetch/XHR로 변경
- Network 패널에서 Wasm 리소스 유형 필터링
- 네트워크 조건 탭의 기기에 대한 사용자 에이전트 클라이언트 힌트
- 문제 탭에서 쿼크 모드 문제 신고하기
- 성능 패널에 컴퓨팅 교차점 포함
- Lighthouse 패널의 Lighthouse 7.5
- '프레임 재시작'이 지원 중단됨 호출 스택의 컨텍스트 메뉴
- [실험용] 프로토콜 모니터
- [실험용] Puppeteer Recorder
- 웹 바이탈 정보 팝업
- 새로운 메모리 검사기
- CSS 스크롤 스냅 시각화
- 새 배지 설정 창
- 가로세로 비율 정보가 포함된 향상된 이미지 미리보기
Content-Encoding
구성 옵션이 있는 새 네트워크 조건 버튼- 계산된 값을 볼 수 있는 단축키
accent-color
키워드- 문제 유형을 색상 및 아이콘으로 분류
- 신뢰 토큰 삭제
- 프레임 세부정보 뷰의 차단된 기능
- 실험 설정에서 실험 필터링하기
- 캐시 스토리지 창의 새
Vary Header
열 - JavaScript 비공개 브랜드 확인 지원
- 중단점 디버깅 지원 개선
[]
표기법으로 마우스 오버 미리보기 지원- HTML 파일의 윤곽선 개선
- Wasm 디버깅을 위한 적절한 오류 스택 트레이스
- 새로운 CSS Flexbox 디버깅 도구
- 새로운 Core Web Vitals 오버레이
- 콘솔 상태 표시줄로 문제 수가 이동됨
- 신뢰할 수 있는 웹 활동 문제 신고하기
- Console에서 문자열 형식을 (유효한) JavaScript 문자열 리터럴로 지정합니다.
- Application 패널의 새 신뢰 토큰 창
- CSS 색 영역 미디어 기능 에뮬레이션
- 개선된 프로그레시브 웹 앱 도구
- Network 패널의 새로운
Remote Address Space
열 - 성능 개선
- 프레임 세부정보 뷰에 허용/허용되지 않은 기능 표시
- 쿠키 창의 새로운
SameParty
열 - 비표준
fn.displayName
지원 중단 - 설정 메뉴의
Don't show Chrome Data Saver warning
지원 중단 - [실험용] 문제 탭에서 저대비 문제 자동 신고
- [실험용] 요소 패널의 전체 접근성 트리 보기
- 신뢰할 수 있는 유형 위반 디버깅 지원
- 표시 영역 밖의 노드 스크린샷 캡처
- 네트워크 요청에 대한 새로운 신뢰 토큰 탭
- Lighthouse 패널의 Lighthouse 7
- CSS
:target
상태 강제 지원 - 요소 복제를 위한 새로운 단축키
- 맞춤 CSS 속성의 색상 선택 도구
- CSS 속성을 복사하는 새로운 단축키
- URL 디코딩된 쿠키를 표시하는 새로운 옵션
- 표시되는 쿠키만 삭제
- Storage 창에서 서드 파티 쿠키를 삭제하는 새로운 옵션
- 맞춤 기기에 대한 사용자 에이전트 클라이언트 힌트 수정
- '네트워크 로그 기록' 유지 설정
- 네트워크 패널에서 WebTransport 연결 보기
- '온라인' '제한 없음'으로 이름이 변경되었습니다.
- 콘솔, 소스 패널, 스타일 창의 새로운 복사 옵션
- 프레임 세부정보 뷰의 새로운 서비스 워커 정보
- 프레임 세부정보 뷰에서 메모리 정보 측정
- 문제 탭에서 의견 보내기
- 성능 패널에서 드롭된 프레임
- 기기 모드에서 폴더블 및 듀얼 화면 에뮬레이션
- [실험용] Puppeteer Recorder로 브라우저 테스트 자동화하기
- [실험용] Styles 창의 글꼴 편집기
- [실험용] CSS Flexbox 디버깅 도구
- [실험용] 새로운 CSP 위반 탭
- [실험용] 새로운 색상 대비 계산 - 고급 인지 대비 알고리즘 (APCA)
- 더 빠른 DevTools 시작
- 새로운 CSS 각도 시각화 도구
- 지원되지 않는 이미지 유형 에뮬레이션
- 스토리지 창에서 스토리지 할당량 크기 시뮬레이션하기
- 성능 패널의 새로운 Web Vitals 영역
- Network 패널에서 CORS 오류 보고
- Frame 세부정보 뷰의 교차 출처 격리 정보
- 프레임 세부정보 뷰의 새로운 Web Workers 정보
- 열린 창의 오프너 프레임 세부정보 표시
- Service Workers 창에서 Network 패널 열기
- 속성 값 복사
- 네트워크 시작자의 스택 트레이스 복사
- 마우스 오버 시 Wasm 변수 값 미리보기
- 콘솔에서 Wasm 변수 평가
- 파일/메모리 크기의 일관된 측정 단위
- 요소 패널에서 유사 요소 강조표시
- [실험용] CSS Flexbox 디버깅 도구
- [실험용] 코드 단축키 맞춤설정
- 새로운 CSS 그리드 디버깅 도구
- 새 WebAuthn 탭
- 상단 패널과 하단 패널 간에 도구 이동
- 스타일 창의 새로운 계산된 사이드바 창
- Computed 창에서 CSS 속성 그룹화
- Lighthouse 패널의 Lighthouse 6.3
- 타이밍 섹션의 이벤트
performance.mark()
개 - Network 패널의 새로운
resource-type
및url
필터 - 프레임 세부정보 뷰 업데이트
- 도구 더보기 메뉴의
Settings
지원 중단 - [실험용] CSS 개요 패널에서 색상 대비 문제 확인 및 수정하기
- [실험용] DevTools에서 단축키 맞춤설정
- 새 미디어 패널
- 요소 패널 컨텍스트 메뉴를 사용하여 노드 스크린샷 캡처
- Issues 탭 업데이트
- 누락된 로컬 글꼴 에뮬레이션
- 비활성 사용자 에뮬레이션
prefers-reduced-data
에뮬레이션- 새로운 JavaScript 기능 지원
- Lighthouse 패널의 Lighthouse 6.2
- '다른 출처' 지원 중단 서비스 워커 창에 추가
- 필터링된 항목의 적용 범위 요약 표시
- Application 패널의 새로운 프레임 세부정보 뷰
- Styles 창에서 액세스할 수 있는 색상 제안
- 요소 패널에 속성 창 복구
- Network 패널에서 인간이 읽을 수 있는
X-Client-Data
헤더 값 - 스타일 창에서 맞춤 글꼴 자동 완성
- 네트워크 패널에 리소스 유형을 일관되게 표시
- 요소 및 네트워크 패널의 지우기 버튼
- CSS-in-JS 프레임워크의 스타일 수정
- Lighthouse 패널의 Lighthouse 6
- 첫 번째 의미 있는 페인트 (FMP) 지원 중단
- 새로운 JavaScript 기능 지원
- 매니페스트 창의 새로운 앱 바로가기 경고
- Timing 탭의 서비스 워커
respondWith
이벤트 - Computed 창의 일관된 표시
- WebAssembly 파일의 바이트 코드 오프셋
- Sources 패널에서 행별 복사 및 잘라내기
- 콘솔 설정 업데이트
- 성능 패널 업데이트
- 중단점, 조건부 중단점, 로그 지점을 위한 새로운 아이콘
- 새로운 문제 탭을 통한 사이트 문제 해결
- 검사 모드 도움말에서 접근성 정보 보기
- 성능 패널 업데이트
- Console의 더 정확한 프로미스 용어
- 스타일 창 업데이트
- 요소 패널의 속성 창 지원 중단
- 매니페스트 창에서 앱 바로가기 지원
- 시각 결함 에뮬레이션
- 언어 에뮬레이션
- 교차 출처 삽입 정책 (COEP) 디버깅
- 중단점, 조건부 중단점, 로그 지점을 위한 새로운 아이콘
- 특정 쿠키를 설정하는 네트워크 요청 보기
- 명령 메뉴에서 왼쪽으로 고정
- 기본 메뉴의 설정 옵션이 이동됨
- '감사' 패널이 Lighthouse 패널로 바뀌었습니다.
- 폴더의 모든 로컬 재정의 삭제
- 업데이트된 긴 작업 UI
- 매니페스트 창의 마스킹 가능한 아이콘 지원
- 기기 모드에서 Moto G4 지원
- 쿠키 관련 업데이트
- 더 정확한 웹 앱 매니페스트 아이콘
- CSS
content
속성 위로 마우스를 가져가 이스케이프 처리되지 않은 값 확인 - 콘솔의 소스 맵 오류
- 파일 끝부분을 스크롤하는 기능을 사용 중지하기 위한 설정
- Console에서
let
및class
재선언 지원 - 개선된 WebAssembly 디버깅
- 초기자 탭에서 개시자 체인 요청
- 개요에서 선택한 네트워크 요청 강조표시
- 네트워크 패널의 URL 및 경로 열
- 업데이트된 사용자-에이전트 문자열
- 새로운 감사 패널 구성 UI
- 함수별 또는 블록별 코드 적용 범위 모드
- 이제 페이지 새로고침으로 코드 적용 범위를 시작해야 함
- 쿠키가 차단된 이유 디버그
- 쿠키 값 보기
- 다양한 선호 색상 구성 및 선호도 감소 모션 환경설정 시뮬레이션
- 코드 적용 범위 업데이트
- 네트워크 리소스가 요청된 이유 디버그
- 콘솔 및 소스 패널이 들여쓰기 기본 설정을 다시 준수
- 커서 탐색을 위한 새로운 단축키
- 감사 패널의 멀티 클라이언트 지원
- 결제 핸들러 디버깅
- 감사 패널의 Lighthouse 5.2
- 성능 패널의 최대 콘텐츠 페인트
- 기본 메뉴에서 DevTools 문제 파일
- 요소 스타일 복사
- 레이아웃 변경 시각화
- 감사 패널의 Lighthouse 5.1
- OS 테마 동기화
- Breakpoint Editor를 열기 위한 단축키
- 네트워크 패널에서 캐시 미리 가져오기
- 객체를 볼 때 비공개 속성
- Application 패널의 알림 및 푸시 메시지
- CSS 값으로 자동 완성
- 네트워크 설정을 위한 새로운 UI
- HAR 내보내기의 WebSocket 메시지
- HAR 가져오기 및 내보내기 버튼
- 실시간 메모리 사용량
- 서비스 워커 등록 포트 번호
- 백그라운드 가져오기 및 백그라운드 동기화 이벤트 검사
- Firefox용 Puppeteer
- CSS 함수 자동 완성 시 중요한 사전 설정
- 명령 메뉴에서 사이트 데이터 삭제
- IndexedDB 데이터베이스 모두 보기
- 마우스 오버 시 리소스의 압축되지 않은 크기 보기
- Breakpoints 창의 인라인 중단점
- IndexedDB 및 Cache 리소스 수
- 세부 검사 도움말을 사용 중지하기 위한 설정
- 편집기에서 탭 들여쓰기를 전환하기 위한 설정
- CSS 속성의 영향을 받는 모든 노드 강조표시
- 감사 패널의 Lighthouse v4
- WebSocket 바이너리 메시지 뷰어
- 명령 메뉴에서 영역 스크린샷 캡처
- Network 패널의 서비스 워커 필터
- 성능 패널 업데이트
- 성능 패널 녹화의 장기 작업
- 타이밍 섹션의 첫 페인트
- 보너스 도움말: RGB 및 HSL 색상 코드 보기 단축키 (동영상)
- 로그 지점
- 검사 모드의 자세한 도움말
- 코드 적용 범위 데이터 내보내기
- 키보드로 콘솔 탐색
- 색상 선택 도구의 AAA 대비율 선
- 커스텀 위치정보 재정의 저장
- 코드 폴딩
- 프레임 탭 이름이 메시지 탭으로 변경됨
- 보너스 팁: 속성별 네트워크 패널 필터링 (동영상)
- 성능 패널에서 성능 측정항목 시각화
- DOM 트리에서 텍스트 노드 강조표시
- DOM 노드에 JS 경로 복사
- 새로운 감사를 포함한 감사 패널 업데이트 명령어 메뉴에서 감사 패널에 액세스하기 위한 JS 라이브러리와 새 키워드를 감지합니다.
- 보너스 팁: 기기 모드를 사용하여 미디어 쿼리 검사 (동영상)
- Live Expression 결과 위로 마우스를 가져가 DOM 노드를 강조표시합니다.
- DOM 노드를 전역 변수로 저장
- 이제 개시자 및 우선순위 정보가 HAR 가져오기 및 내보내기에 포함됩니다.
- 기본 메뉴에서 명령어 메뉴에 액세스
- PIP 모드 중단점
- 보너스 팁:
monitorEvents()
를 사용하여 노드의 실행된 이벤트를 Console (동영상) - 콘솔의 Live Expressions
- Eager 평가 중에 DOM 노드 강조표시
- 성능 패널 최적화
- 더 안정적인 디버깅
- 명령 메뉴에서 네트워크 제한 사용 설정
- 자동 완성 조건부 중단점
- AudioContext 이벤트에서 중단
- ndb로 Node.js 앱 디버그
- 보너스 팁: User Timing API로 실제 사용자 상호작용 측정하기
- 적극적인 평가
- 인수 힌트
- 함수 자동 완성
- ES2017 키워드
- 감사 패널의 Lighthouse 3.0
- BigInt 지원
- Watch(조사식) 창에 속성 경로 추가
- "Show timestamp(타임스탬프 표시)" 설정으로 이동됨
- 보너스 팁: 덜 알려진 콘솔 메서드 (동영상)
- 모든 네트워크 헤더에서 검색
- CSS 변수 값 미리보기
- 가져오기로 복사
- 새 감사, 데스크톱 구성 옵션, trace 보기
- 무한 루프 중지
- 실적 탭의 사용자 시간
- 메모리 패널에 명확하게 나열된 JavaScript VM 인스턴스
- 네트워크 탭 이름이 페이지 탭으로 변경됨
- 어두운 테마 업데이트
- 보안 패널의 인증서 투명성 정보
- 성능 패널의 사이트 격리 기능
- 보너스 팁: 레이어 패널 + 애니메이션 검사기 (동영상)
- Network 패널의 블랙박스
- 기기 모드에서 확대/축소 자동 조정
- '미리보기 및 응답' 탭의 예쁘게 인쇄하기
- 미리보기 탭에서 HTML 콘텐츠 미리보기
- HTML 내부 스타일에 대한 로컬 재정의 지원
- 보너스 팁: 이벤트 리스너 중단점을 더 유용하게 만드는 블랙박스 프레임워크 스크립트
- 로컬 재정의
- 새로운 접근성 도구
- 변경사항 탭
- 새로운 검색엔진 최적화 및 실적 감사
- 실적 패널의 여러 녹음 파일
- 비동기 코드에서 작업자를 사용한 안정적인 코드 스테핑
- 보너스 팁: Puppeteer를 사용하여 DevTools 작업 자동화 (동영상)
- 성능 모니터
- Console 사이드바
- 유사한 Console 메시지 그룹화
- 보너스 팁: 마우스 오버 의사 클래스 전환 (동영상)
- 멀티 클라이언트 원격 디버깅 지원
- Workspace 2.0
- 새로운 감사 4개
- 커스텀 데이터로 푸시 알림 시뮬레이션
- 맞춤 태그로 백그라운드 동기화 이벤트 트리거하기
- 보너스 팁: 이벤트 리스너 중단점 (동영상)
- 콘솔의 최상위 대기 중
- 새로운 스크린샷 워크플로
- CSS 그리드 강조표시
- 객체 쿼리를 위한 새로운 Console API
- 새 Console 필터
- Network 패널에서 HAR 가져오기
- 미리보기 가능한 캐시 리소스
- 더 예측 가능한 캐시 디버깅
- 블록 수준 코드 적용 범위
- 휴대기기 제한 시뮬레이션
- 스토리지 사용량 보기
- 서비스 워커가 응답을 캐시한 시점 보기
- 명령 메뉴에서 FPS 측정기 사용 설정
- 확대/축소 또는 스크롤로 마우스휠 동작 설정
- ES6 모듈 디버깅 지원
- 새로운 감사 패널
- 서드 파티 배지
- 여기로 이동의 새로운 동작
- 비동기 단계로 전환
- Console에서 보다 유용한 객체 미리보기
- Console에서 보다 유용한 컨텍스트 선택
- 범위 탭의 실시간 업데이트
- 간소화된 네트워크 제한 옵션
- 기본적으로 비동기 스택 사용
- CSS 및 JS 코드 적용 범위
- 전체 페이지 스크린샷
- 요청 차단
- Step over async await
- 통합 명령어 메뉴