이 페이지는 Cloud Translation API를 통해 번역되었습니다.

DevTools의 새로운 기능 (Chrome 92)

Jecelyn Yeen

CSS 그리드 편집기

많은 사용자가 요청한 기능입니다. 이제 새로운 CSS 그리드 편집기로 CSS 그리드를 미리 보고 작성할 수 있습니다.

CSS 그리드 편집기

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

Chromium 문제: 1203241

콘솔에서 `const` 재선언을 지원합니다.

이제 Console에서 기존 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 라벨의 이름을 Fetch/XHR로 변경

XHR 라벨의 이름이 Fetch/XHR로 변경되었습니다. 이 변경사항을 통해 이 필터에 XMLHttpRequest 및 Fetch API 네트워크 요청이 모두 포함되어 있음을 더 명확하게 알 수 있습니다.

가져오기/XHR 라벨

Chromium 문제: 1201398

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

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

Wasm으로 필터링

Chromium 문제: 1103638

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

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

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

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

Chromium 문제: 1174299

문제 탭에서 쿼크 모드 문제 신고

이제 DevTools에서 쿼크 모드 및 제한됨 쿼크 모드 문제를 보고합니다.

쿼크 모드와 제한된 쿼크 모드는 웹 표준이 만들어지기 전의 레거시 브라우저 모드입니다. 이러한 모드는 예기치 않은 시각적 효과를 일으키는 표준 시대 이전의 레이아웃 동작을 에뮬레이션합니다.

레이아웃 문제를 디버깅할 때 개발자는 이 문제가 사용자가 작성한 CSS 또는 HTML 버그로 인해 발생한다고 생각할 수 있지만, 진짜 문제는 페이지의 Compat 모드입니다. DevTools는 이 문제를 해결하기 위한 제안을 제공합니다.

문제 탭에서 쿼크 모드 문제 신고

Chromium 문제: 622660

성능 패널에 계산 교차 포함

이제 DevTools의 Flame Chart에 Compute Intersections가 표시됩니다. 이러한 변경사항을 통해 Intersection Observer 이벤트를 식별하고 잠재적인 성능 오버헤드를 디버그할 수 있습니다.

성능 패널에서 교집합 계산

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 녹음기

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

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

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

Puppeteer 녹음기

Chromium 문제: 1199787

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.

crbug.com을 통해 제안 또는 의견을 제출하세요.
DevTools에서 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다.
@ChromeDevTools로 트윗을 보냅니다.
DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 댓글을 남겨주세요.