DevTools의 새로운 기능 (Chrome 92)

Jecelyn Yeen

CSS 그리드 편집기

많은 요청이 있었던 기능입니다. 이제 새 CSS 그리드 편집기로 CSS 그리드를 미리 보고 작성할 수 있습니다.

CSS 그리드 편집기

페이지의 HTML 요소에 display: grid 또는 display: inline-grid가 적용되면 스타일 창에 요소 옆에 아이콘이 표시됩니다. 아이콘을 클릭하여 CSS 그리드 편집기를 전환합니다. 여기에서 화면 아이콘 (예: justify-content: space-around)을 사용하여 잠재적인 변경사항을 미리 보고 클릭 한 번으로 그리드 모양을 작성할 수 있습니다.

Chromium 문제: 1203241

Console에서 const 재선언 지원

이제 콘솔에서 기존 let 및 class 재선언 외에도 const 문을 재선언할 수 있습니다. 재선언할 수 없는 점은 콘솔을 사용하여 새 JavaScript 코드를 실험하는 웹 개발자에게 자주 불편을 끼쳤습니다.

이를 통해 개발자는 코드를 DevTools 콘솔에 복사하여 붙여넣고 코드의 작동 방식을 확인하거나 실험하고, 코드를 약간 변경하고, 페이지를 새로고침하지 않고 이 과정을 반복할 수 있습니다. 이전에는 코드가 const 바인딩을 다시 선언하면 DevTools에서 문법 오류가 발생했습니다.

아래 예를 참고하세요. const 재선언은 별도의 REPL 스크립트 전반에서 지원됩니다 (a 변수 참고). 다음 시나리오는 설계상 지원되지 않습니다.

  • REPL 스크립트에서 페이지 스크립트의 const 재선언이 허용되지 않음
  • 동일한 REPL 스크립트 내에서 const 재선언은 허용되지 않습니다 (b 변수 참고).

const 재선언

Chromium 문제: 1076427

소스 순서 뷰어

이제 더 나은 접근성 검사를 위해 화면에서 소스 요소의 순서를 볼 수 있습니다.

소스 순서 뷰어

HTML 문서의 콘텐츠 순서는 검색엔진 최적화 및 접근성에 중요합니다. 최신 CSS 기능을 사용하면 개발자가 화면 순서가 HTML 문서와 매우 다른 콘텐츠를 만들 수 있습니다. 스크린 리더 사용자는 시각 장애가 없는 사용자와는 다른, 혼란스러울 수 있는 환경을 경험하게 되므로 이는 큰 접근성 문제입니다.

Chromium 문제: 1094406

프레임 세부정보를 볼 수 있는 새로운 단축키

요소 패널에서 iframe 요소를 마우스 오른쪽 버튼으로 클릭하고 프레임 세부정보 표시를 선택하여 iframe 세부정보를 확인합니다.

프레임 세부정보 표시

그러면 애플리케이션 패널에서 iframe 세부정보 보기로 이동하여 문서 세부정보, 보안 및 격리 상태, 권한 정책 등을 검토하여 잠재적인 문제를 디버그할 수 있습니다.

프레임 세부정보 보기

Chromium 문제: 1192084

향상된 CORS 디버깅 지원

이제 교차 출처 리소스 공유 (CORS) 오류가 문제 탭에 표시됩니다. CORS 오류는 여러 가지 이유로 발생할 수 있습니다. 각 문제를 클릭하여 펼치면 원인과 해결 방법을 확인할 수 있습니다.

문제 탭의 CORS 문제

Chromium 문제: 1141824

네트워크 패널 업데이트

XHR 라벨 이름을 가져오기/XHR로 변경

XHR 라벨의 이름이 가져오기/XHR로 변경되었습니다. 이 변경사항을 통해 이 필터에 XMLHttpRequest 및 Fetch API 네트워크 요청이 모두 포함된다는 점이 더 명확해집니다.

가져오기/XHR 라벨

Chromium 문제: 1201398

네트워크 패널에서 Wasm 리소스 유형 필터링

이제 새 Wasm 버튼을 클릭하여 Wasm 네트워크 요청을 필터링할 수 있습니다.

Wasm으로 필터링

Chromium 문제: 1103638

네트워크 조건 탭의 기기 사용자 에이전트 클라이언트 힌트

이제 네트워크 상태 탭의 사용자 에이전트 필드에 있는 기기에 사용자 에이전트 클라이언트 힌트가 적용됩니다.

User-Agent Client Hints는 Client Hints API의 새로운 확장으로, 개발자가 개인 정보를 보호하고 인체공학적인 방식으로 사용자의 브라우저에 대한 정보에 액세스할 수 있도록 지원합니다.

네트워크 조건 탭의 기기 사용자 에이전트 클라이언트 힌트

Chromium 문제: 1174299

문제 탭에서 Quirks 모드 문제 신고

이제 DevTools에서 Quirks 모드 및 Limited-quirks 모드 문제를 보고합니다.

Quirks 모드 및 Limited-quirks 모드는 웹 표준이 만들어지기 전의 기존 브라우저 모드입니다. 이러한 모드는 예기치 않은 시각적 효과를 일으키는 경우가 많은 표준 이전 시대의 레이아웃 동작을 에뮬레이션합니다.

레이아웃 문제를 디버그할 때 개발자는 사용자가 작성한 CSS 또는 HTML 버그로 인해 발생한다고 생각할 수 있지만, 실제 문제는 페이지의 호환 모드입니다. DevTools에서 해결 방법을 제안합니다.

문제 탭에서 Quirks 모드 문제 신고

Chromium 문제: 622660

성능 패널에 교집합 계산 포함

이제 DevTools의 플레임 차트에 Compute Intersections가 표시됩니다. 이러한 변경사항을 통해 교차 관찰자 이벤트를 식별하고 잠재적인 성능 오버헤드를 디버그할 수 있습니다.

성능 패널에서 교집합 계산

Chromium 문제: 1199137

Lighthouse 패널의 Lighthouse 7.5

이제 Lighthouse 패널에서 Lighthouse 7.5가 실행됩니다. 이제 CSS에 aspect-ratio가 정의된 이미지의 경우 '명시적 너비 및 높이 누락' 경고가 삭제됩니다. 이전에는 Lighthouse에서 너비와 높이가 정의되지 않은 이미지에 대해 경고를 표시했습니다.

전체 변경사항 목록은 출시 노트를 참고하세요.

Chromium 문제: 772558

호출 스택에서 지원 중단된 '프레임 다시 시작' 컨텍스트 메뉴

프레임 다시 시작 옵션이 지원 중단되었습니다. 이 기능을 제대로 사용하려면 추가 개발이 필요합니다. 현재는 제대로 작동하지 않고 자주 비정상 종료됩니다.

지원 중단된 프레임 다시 시작 컨텍스트 메뉴

Chromium 문제: 1203606

[실험용] 프로토콜 모니터

Chrome DevTools는 Chrome DevTools 프로토콜 (CDP)을 사용하여 Chrome 브라우저를 계측, 검사, 디버그, 프로파일링합니다. 프로토콜 모니터는 DevTools에서 실행한 모든 CDP 요청과 응답을 볼 수 있는 방법을 제공합니다.

CDP 테스트를 용이하게 하는 두 가지 새로운 함수가 추가되었습니다.

  • 새 저장 버튼을 사용하면 녹음된 메시지를 JSON 파일로 다운로드할 수 있습니다.
  • 원시 CDP 명령어를 직접 전송할 수 있는 새 필드

프로토콜 모니터

Chromium 문제: 1204004, 1204466

[실험용] Puppeteer 녹음기

이제 Puppeteer 레코더가 브라우저와의 상호작용을 기반으로 단계 목록을 생성합니다. 이전에는 DevTools에서 대신 Puppeteer 스크립트를 직접 생성했습니다. 단계를 Puppeteer 스크립트로 내보낼 수 있는 새 내보내기 버튼이 추가되었습니다.

단계를 녹화한 후 새 재생 버튼을 사용하여 단계를 재생할 수 있습니다. 여기의 안내에 따라 녹화를 시작하는 방법을 알아보세요.

이 기능은 초기 실험 단계에 있습니다. Google은 향후 녹음기 기능을 개선하고 확장할 계획입니다.

Puppeteer Recorder

Chromium 문제: 1199787

미리보기 채널 다운로드

Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 미리보기 채널을 사용하면 최신 DevTools 기능에 액세스하고, 최신 웹 플랫폼 API를 테스트하고, 사용자가 문제를 발견하기 전에 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

다음 옵션을 사용하여 DevTools와 관련된 새로운 기능, 업데이트 또는 기타 사항을 논의하세요.

DevTools의 새로운 기능

DevTools의 새로운 기능 시리즈에서 다룬 모든 항목의 목록입니다.