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

DevTools의 새로운 기능 (Chrome 92)

Jecelyn Yeen

CSS 그리드 편집기

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

CSS 그리드 편집기

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

Chromium 문제: 1203241

콘솔에서 `const` 재선언 지원

이제 Console에서 기존 let 및 class 재선언 외에도 const 문의 재선언을 지원합니다. 재선언할 수 없는 문제는 Console을 사용하여 새로운 JavaScript 코드를 실험하는 웹 개발자에게 흔히 골치 아픈 문제였습니다.

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

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

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

const 재선언

Chromium 문제: 1076427

소스 순서 뷰어

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

소스 순서 뷰어

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

Chromium 문제: 1094406

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

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

프레임 세부정보 표시

이렇게 하면 Application 패널에서 iframe 세부정보를 확인할 수 있으며 여기에서 문서 세부정보, 보안 및 격리 상태, 권한 정책 등을 검토하여 잠재적인 문제를 디버그할 수 있습니다.

프레임 세부정보 뷰

Chromium 문제: 1192084

향상된 CORS 디버깅 지원

이제 교차 출처 리소스 공유 (CORS) 오류가 문제 탭에 표시됩니다. CORS 오류가 발생하는 이유는 다양합니다. 각 문제를 클릭하여 펼쳐 잠재적인 원인과 솔루션을 확인하세요.

문제 탭의 CORS 문제

Chromium 문제: 1141824

네트워크 패널 업데이트

XHR 라벨의 이름을 Fetch/XHR로 바꿉니다.

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

가져오기/XHR 라벨

Chromium 문제: 1201398

Network 패널에서 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 관찰자 이벤트를 식별하고 잠재적 성능 오버헤드를 디버그하는 데 도움이 됩니다.

성능 패널의 교집합 계산

Chromium 문제: 1199137

Lighthouse 패널의 Lighthouse 7.5

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

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

Chromium 문제: 772558

호출 스택의 '프레임 재시작' 컨텍스트 메뉴 지원 중단됨

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

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

Chromium 문제: 1203606

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

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

CDP 테스트를 용이하게 하기 위해 두 가지 새로운 기능이 추가되었습니다.

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

프로토콜 모니터

Chromium 문제: 1204004, 1204466

[실험용] Puppeteer Recorder

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

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

이 실험은 초기 단계라는 점에 유의해 주세요. 시간이 지남에 따라 녹음기 기능을 개선하고 확장할 계획입니다.

Puppeteer 녹음기

Chromium 문제: 1199787

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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