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

프레임 세부정보를 확인하는 새로운 단축키

Elements(요소) 패널에서 iframe 요소를 마우스 오른쪽 버튼으로 클릭하고 Show frame details(프레임 세부정보 표시)를 선택하여 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 스크립트로 내보낼 수 있는 새 내보내기 버튼이 추가되었습니다.

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

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

Puppeteer Recorder

Chromium 문제: 1199787

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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