DevTools의 새로운 기능 (Chrome 111)

Jecelyn Yeen

스타일 창으로 HD 색상 디버깅

새로운 CSS 색상 유형 및 공간이 웹에 도입됩니다. 또한 DevTools에서 개발자가 고화질 색상을 만들고 변환하고 디버그하는 데 도움이 되는 새로운 도구를 도입한 것도 매우 기쁜 소식입니다.

이제 스타일 창에서 CSS 색상 수준 4 사양에 설명된 대로 12개의 새로운 색상 공간과 7개의 새로운 색상 영역을 지원합니다. 웹에서 사용할 수 있는 색상 옵션을 자세히 알아보려면 고화질 CSS 색상 가이드를 참고하세요.

color(), lch(), oklab(), color-mix()를 사용한 CSS 색상 정의의 예는 다음과 같습니다.

color-mix() 함수를 사용하면 계산됨 창에서 최종 색상 출력을 확인할 수 있습니다.

색상 선택 도구는 더 많은 기능을 갖춘 모든 새로운 색상 공간을 지원합니다. 예를 들어 color(display-p3 1 0 1)의 색상 견본을 클릭합니다. 선택한 색상의 색역을 더 명확하게 이해할 수 있도록 sRGB 및 display-p3 색역을 구분하는 색역 경계선도 추가되었습니다.

DevTools는 색상 형식 간의 색상 변환을 지원합니다. 색상 형식 변경 아이콘을 사용하여 변환 팝업에 액세스하거나 스타일 창에서 Shift 키를 누른 채 색상 견본을 클릭하면 됩니다.

변환할 때 변환이 공간에 맞게 잘렸는지 여부를 아는 것이 중요합니다. DevTools는 변환된 색상 옆에 클리핑을 알리는 경고 아이콘을 표시합니다.

또한 새로운 단축키를 사용해 화면에서 색상을 선택할 수 있습니다. 'c'를 눌러 스포이드를 활성화하고 Escape를 눌러 비활성화합니다. 스포이트 도구는 sRGB 색상 공간의 색상만 샘플링합니다. 예를 들어 sRGB 색상 공간 외부에 있는 색상 color(display-p3 1 0 1)를 샘플링하려고 하면 스포이드 도구가 색상을 sRGB 공간에서 가장 가까운 색상인 마젠타색 color(display-p3 0.92 0.2 0.97)으로 클리핑합니다.

마지막으로, 새로운 HD 색상 형식을 위해 색상 형식 설정이 지원 중단됩니다.

Chromium 문제: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054

향상된 중단점 UX

새롭게 디자인된 중단점 창을 사용하면 일반적으로 사용되는 기능(특히 중단점 비활성화, 수정, 삭제)에 빠르게 액세스할 수 있습니다.

주요 사항은 다음과 같습니다. - 일시중지 예외 옵션이 중단점 창으로 이동하고 텍스트 라벨이 지정되어 더 명확하게 설명됩니다.

• 중단점은 파일별로 그룹화되고, 줄 또는 열 번호별로 정렬되며, 접을 수 있습니다.

• 중단점이나 파일 위로 마우스를 가져가면 중단점을 비활성화, 삭제, 수정할 수 있는 새로운 옵션이 표시됩니다.

• 중단점 수정 버튼을 클릭하여 중단점 편집기를 엽니다. 여기에서 중단점 조건을 입력하거나 로그 지점으로 전환할 수 있습니다.

DevTools로 디버그하는 방법을 알아보려면 JavaScript 디버깅 참조를 참고하세요.

Chromium 문제: 1407586, 1402891, 1402893

맞춤설정 가능한 녹음기 단축키

단축키를 사용하여 사용자 플로우를 더 빠르게 녹화하고 재생합니다.

레코더에는 사용자 흐름을 더 빠르게 녹화하고 재생할 수 있는 편리한 키보드 단축키가 몇 가지 도입되었습니다.

단축키가 기억나지 않나요? 언제든지 ? 버튼을 클릭하여 모든 바로가기를 볼 수 있습니다.

설정 메뉴를 통해 이러한 단축키를 맞춤설정할 수도 있습니다.

다른 패널에서 작업 중이고 사용자 흐름 녹화를 시작하려면 DevTools의 명령어 메뉴에서 새 녹화 만들기 명령어를 사용하여 시작하세요.

Chromium 문제: 1339771

Angular의 구문 강조 표시 개선

DevTools에서 Angular HTML 템플릿의 구문 강조 표시를 개선하여 코드를 더 쉽게 읽고 구조를 인식할 수 있습니다.

Chromium 문제: 1385374, 1385678

애플리케이션 패널에서 캐시 재구성

이제 캐시 저장소 창은 애플리케이션 패널의 저장소 섹션에서 확인할 수 있으며 뒤로/앞으로 캐시 창은 백그라운드 서비스 섹션으로 이동되었습니다.

Chromium 문제: 1407166

기타 하이라이트

이번 출시 버전의 주목할 만한 수정사항은 다음과 같습니다.

• DevTools가 소스 맵을 로드할 때 캐시 사용 중지 설정을 따르도록 업데이트되었습니다. (1407084)
• 이제 요소 패널에서 검색 결과의 첫 번째 일치 요소에 즉시 자동 포커스가 지정됩니다. (1381853)
• 소스 맵 및 중단점 안정성을 개선하기 위한 다양한 수정사항 (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
• 디버깅을 더 쉽게 할 수 있도록 이제 DevTools에서 비공개 클래스 멤버가 포함된 표현식을 평가할 수 있습니다. (1381806)

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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

DevTools의 새로운 기능

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