DevTools의 새로운 기능 (Chrome 95)

Jecelyn Yeen

새로운 CSS 길이 작성 도구

DevTools에 CSS에서 길이를 업데이트하는 더 쉽고 유연한 방법이 추가되었습니다.

스타일 창에서 길이가 있는 CSS 속성 (예: height, padding)을 찾습니다.

단위 유형 위로 마우스를 가져가면 단위 유형에 밑줄이 표시됩니다. 클릭하여 드롭다운에서 단위 유형을 선택합니다.

단위 값 위로 마우스를 가져가면 마우스 포인터가 가로 커서로 변경됩니다. 가로로 드래그하여 값을 늘리거나 줄입니다. 값을 10씩 조정하려면 드래그할 때 Shift 키를 누릅니다.

단위 값을 텍스트로 수정할 수도 있습니다. 값을 클릭하고 수정을 시작하면 됩니다.

Chromium 문제: 1126178, 1172993

문제 탭에서 문제 숨기기

이제 '문제' 탭에서 특정 문제를 숨겨 중요한 문제에만 집중할 수 있습니다.

문제 탭에서 숨기려는 문제 위로 마우스를 가져갑니다. 옵션 더보기     > 이와 같은 문제 숨기기를 클릭합니다.

숨겨진 모든 문제가 숨겨진 문제 창에 추가됩니다. 창을 펼칩니다. 숨겨진 문제를 모두 숨기기 해제하거나 선택한 문제만 숨기기 해제할 수 있습니다.

Chromium 문제: 1175722

속성 표시 개선

DevTools는 다음을 통해 속성 표시를 개선합니다.

• 콘솔, 소스 패널, 속성 창에서 항상 자체 속성을 먼저 굵게 표시하고 정렬합니다.
• 속성 창에서 속성 표시를 평면화합니다.

예를 들어 아래 스니펫은 자체 속성이 2개(user 및 access)인 URL 객체 link를 만들고 상속된 속성 search의 값을 업데이트합니다.

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

콘솔에서 link을 로깅해 보세요. 이제 자체 속성이 굵게 표시되고 먼저 정렬됩니다. 이러한 변경사항으로 특히 상속된 속성이 많은 웹 API (예: URL)의 맞춤 속성을 쉽게 확인할 수 있습니다.

이러한 변경사항 외에도 속성 창의 속성이 이제 더 나은 DOM 속성 디버깅 환경(특히 웹 구성요소의 경우)을 위해 평면화됩니다.

Chromium 문제: 1076820, 1119900

Lighthouse 패널의 Lighthouse 8.4

이제 Lighthouse 패널이 Lighthouse 8.4를 실행합니다. 이제 Lighthouse는 콘텐츠가 포함된 가장 큰 페인트 (LCP) 요소가 지연 로드된 이미지인지 감지하고 loading 속성을 삭제하도록 권장합니다.

업데이트에 관한 자세한 내용은 Lighthouse 8.4의 새로운 기능을 참고하세요.

Chromium 문제: 772558

소스 패널에서 스니펫 정렬

소스 패널 아래의 스니펫 창에 있는 스니펫이 이제 알파벳순으로 정렬됩니다. 이전에는 정렬되지 않았습니다.

스니펫 기능을 활용하여 명령어를 더 빠르게 실행하세요. 이 동영상에서 팁을 확인하세요.

Chromium 문제: 1243976

번역된 출시 노트 및 번역 버그 신고를 위한 새로운 링크

이제 '새로운 기능' 탭을 통해 러시아어, 중국어, 스페인어, 일본어, 포르투갈어, 한국어 등 6개 언어로 DevTools 출시 노트를 클릭하여 읽을 수 있습니다.

Chrome 94부터 DevTools에서 기본 언어를 설정할 수 있습니다. 번역에 문제가 있는 경우 옵션 더보기 > 도움말 > 번역 버그 신고를 통해 번역 문제를 신고하여 개선에 동참해 주세요.

Chromium 문제: 1246245, 1245481

DevTools 명령 메뉴의 UI 개선

명령어 메뉴에서 파일을 검색하기 어려우셨나요? 명령 메뉴 사용자 인터페이스가 개선되었습니다.

명령어 메뉴를 열어 Windows 및 Linux에서는 단축키 Control+P, MacOS에서는 Command+P로 파일을 검색합니다.

명령 메뉴의 UI 개선은 아직 진행 중이므로 더 많은 업데이트를 기대해 주세요.

Chromium 문제: 1201997

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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

DevTools의 새로운 기능

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