DevTools의 새로운 기능 (Chrome 92)

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 변수 참고).

Chromium 문제: 1076427

소스 순서 뷰어

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

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

Chromium 문제: 1094406

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

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

그러면 Application 패널에서 iframe 세부정보를 볼 수 있고 여기에서 문서 세부정보, 보안 및 격리 상태, 권한 정책 등을 사용하여 잠재적인 문제를 디버그할 수 있습니다.

Chromium 문제: 1192084

향상된 CORS 디버깅 지원

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

Chromium 문제: 1141824

네트워크 패널 업데이트

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

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

Chromium 문제: 1201398

Network 패널에서 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 Protocol)를 사용하여 Chrome 브라우저를 계측, 검사, 디버그, 프로파일링합니다. 프로토콜 모니터를 사용하면 DevTools에서 수행한 모든 CDP 요청과 응답을 볼 수 있습니다.

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

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

Chromium 문제: 1204004, 1204466

[실험용] Puppeteer Recorder

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

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

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

Chromium 문제: 1199787

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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

DevTools의 새로운 기능

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