728x90

DevTools 의 새로운 기능 (Chrome 95)

새 CSS 길이 작성 도구

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

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

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

 

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

 

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

 

문제 탭에서 문제 숨기기

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

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

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

속성 표시 개선

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

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

예를 들어, 아래 코드 조각을 살펴보면 user  sccess 라는 속성을 가지고, 상속받은 속성인 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 에서 유용합니다.

Lighthouse 8.4

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

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

소스 패널에서 스니펫 정렬

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

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

 

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

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

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

 

DevTools 커맨드 메뉴 UI 개선

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

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

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

 

프리뷰 채널 다운로드하기

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

 

더 많은 DevTools 기능

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

Chrome 96

Chrome 95

Chrome 94

Chrome 93

 

위 내용은 크롬개발자사이트에서 전문 발췌하였음을 알려드립니다.

더 많은 자세한 정보는 크롬개발자사이트를 참고하세요

728x90
SNS 공유하기
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">