DevTools 의 새로운 기능 (Chrome 95)

Published on Updated on

Translated to: English, Español, Português, 中文, Pусский, 日本語

이 게시글의 번역에는 조은님이 참여하였으며, 이지웅님과 최원영님, 그리고 도창욱님이 리뷰를 맡아 주셨습니다.

DevTools를 개선하는 데 도움을 주고 싶으신가요? Google User Research 에 참여해보세요.

새 CSS 길이 작성 도구

DevTools 에 CSS 길이를 더 쉽고 유연하게 변경할 수 있는 방법이 추가되었습니다.

스타일 영역에서, heightpadding 과 같은 길이를 포함한 CSS 속성을 살펴보세요.

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

단위 값에 마우스를 가져가면 마우스 포인터가 좌우 화살표 커서로 바뀝니다. 커서를 좌우로 드래그해서 값을 늘리거나 줄일 수 있습니다. 값을 10 단위로 조정하고 싶다면 Shift 키를 누른채로 드래그하세요.

단위 값을 텍스트로도 변경할 수 있습니다. 값을 클릭하고 변경하세요.

Chromium issues: 1126178, 1172993

문제 탭에서 문제 숨기기

문제 탭에서 특정 문제를 숨김으로써 중요한 문제에만 집중할 수 있습니다.

문제 탭 에서 숨기려는 문제 위로 마우스를 가져갑니다. 더보기 에 있는   더보기   > 비슷한 문제 숨기기 를 클릭하세요.

비슷한 문제 숨기기 메뉴

모든 숨겨진 문제들은 숨겨진 문제 영역 아래에 추가됩니다. 영역을 펼쳐 보세요. 모든 숨겨진 문제를 한 번에 숨김 해제하거나, 개별로 숨김 해제할 수 있습니다.

숨겨진 문제 영역

Chromium issue: 1175722

속성 표시 개선

DevTools 에서 속성을 표시하는 방식을 개선했습니다.

  • 콘솔, 소스 패널 및 속성 영역에서 해당 객체가 보유한 속성은 굵게 표시하고 최상단에서 보여줍니다.
  • 속성 영역에서 속성을 1차원으로 보여 줍니다.

예를 들어, 아래 코드 조각을 살펴보면 usersccess 라는 속성을 가지고, 상속받은 속성인 search 의 값을 변경한 link 라는 URL 객체를 만들었습니다.

/* 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 를 로깅해보세요. 객체의 자체 속성은 굵게 표시되고 첫번째로 노출됩니다. 이러한 변경을 통해 커스텀 속성을 더 쉽게 찾을 수 있습니다. 특히 상속되는 속성이 많은 Web APIs (예: URL)에서 유용합니다.

자체 속성은 굵게 표시되고, 첫번째로 노출됩니다.

위의 변경사항 외에도, 속성 영역의 속성도 1차원화 되었습니다. 이를 통해 DOM 속성 디버깅 경험을 개선하였으며, 특히 Web components 에서 유용합니다.

속성 플래튼

Chromium issues: 1076820, 1119900

Lighthouse 8.4

Lighthouse 패널이 이제 Lighthouse 8.4로 업데이트 되었습니다. 이제 Lighthouse에서 Largest Containful Paint (LCP) 요소가 레이지 로딩된 이미지인지 감지하고 해당 요소에서 loading 속성을 제거할 것을 권장합니다.

전체 변경사항은 What’s new in Lighthouse 8.4 (영문) 를 참고하세요.

Lighthouse 보고서에서 레이지 로딩된 LCP 측정

Chromium issue: 772558

소스 패널에서 스니펫 정렬

소스 패널 안에 있는 스니펫 영역의 스니펫 들은 이제 알파벳 순으로 정렬됩니다.

커맨드를 통해 더 빠르게 스니펫 기능을 실행할 수 있습니다. tip (영문) 영상을 참고하세요!

소스 패널에서 스니펫 정렬

Chromium issue: 1243976

번역된 릴리즈 정보와 번역 오류 제보를 위한 링크들

새로운 기능 탭에서 총 6개 언어 (러시아어, 중국어, 스페인어, 일본어, 포르투갈어, 한국어) 로 번역된 DevTools 릴리즈 노트를 클릭하여 읽을 수 있습니다.

Chrome 94 부터 DevTools 에서 선호하는 언어를 설정 할 수 있습니다. 번역 관련 문제를 발견하였다면, 더 보기 > 도움말 > 번역 문제 신고 를 통해 번역 문제를 제보 하여 더 나은 번역을 만들기 위해 도와주세요.

번역된 릴리스 정보로 이동하는 링크 및 번역 관련 버그 제보

Chromium issues: 1246245, 1245481

DevTools 커맨드 메뉴 UI 개선

커맨드 메뉴 에서 파일을 찾기 어려웠던 경험을 해보신 적이 있으셨나요? 좋은 소식이 있습니다. 이제 커맨드 메뉴 UI가 개선되었습니다!

커맨드 메뉴 를 열고, Windows, Linux 에서는 Control+P, MacOS 에서는 Command+P 단축키를 사용하여 파일을 찾을 수 있습니다.

커맨드 메뉴 UI 개선 작업은 계속 진행되고 있습니다. 업데이트를 계속 지켜봐주세요!

커맨드 메뉴

Chromium issue: 1201997

프리뷰 채널 다운로드하기

Chrome Canary, Dev, Beta 를 기본 개발용 브라우저로 사용해보는 걸 검토해보세요. 프리뷰 채널에서는 최신 DevTools 기능들을 사용할 수 있고, 갓 나온 웹 플랫폼 API를 테스트해 볼 수 있으며, 사용자들이 사이트의 문제를 보기전에 미리 찾아낼 수 있습니다.

Chrome DevTools 팀과 이야기 나누기

아래 옵션을 사용하여 게시물의 새로운 기능 및 변경 사항, 또는 DevTools 관련된 기타 사항에 토론해보세요.

  • crbug.com 를 이용한 피드백 및 제안 전달하기.
  • DevTools 에서 More options   More   > Help > Report a DevTools issues 를 사용하여 DevTools 이슈 제보하기.
  • @ChromeDevTools 에 트윗하기.
  • What's new in DevTools YouTube 비디오 에 댓글 남기기.

더 많은 DevTools 기능

What's New In DevTools 영어 버전을 참고하여 관련 기능의 전체 목록을 볼 수 있습니다. 아래 콘텐츠들은 한국어로 번역된 콘텐츠들입니다.

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.