DevTools 의 새로운 기능 (Chrome 102)

Published on Updated on

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

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

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

미리보기 기능: 새로운 Performance insights 창

Performance insights 창을 이용하여 웹사이트 성능에 대해 실천 가능한, 그리고 유스 케이스에 기반한 인사이트를 발견할 수 있습니다.

여기를 클릭하여 창을 열고, 여러분의 유스 케이스를 바탕으로 녹화를 시작합니다. 한 가지 예시로, 이 데모 페이지 로딩을 측정해 보겠습니다. 새로운 Performance insights 창

녹화가 완료되면, 여러분은 Insight 창에서 Performance insight 를 볼 수 있습니다. 각각의 인사이트 항목(예시: Render blocking request 및 layout shift)을 클릭하여 페이지 내의 이슈와 잠재적인 수정 사항에 대해 알아보세요.

Performance insights 관련 문서 로 가면 단계별 튜토리얼을 볼 수 있습니다.

Performance insights 는 미리보기 기능으로서, 성능 전문가가 아닌 웹 개발자들이 잠재적인 성능 문제를 인식하고 해결하는 데에 도음을 줄 수 있습니다. 우리는 이 기능을 현재 활발하게 개발하고 있으며, 더 많은 개선사항을 위해서 여러분의 피드백이 필요합니다. Chromium issue: 1270700

새 바로가기 메뉴 - 라이트 테마 및 다크 테마 에뮬레이팅하기

여러분은 이제 스타일 창의 새 바로가기를 통해 라이트 테마 및 다크 테마를 좀 더 빠르게 에뮬레이트할 수 있습니다. (CSS 미디어 기능 prefers-color-scheme)

이전에는, 렌더링 탭에서 테마 에뮬레이션 을 위해 더 많은 단계를 거쳐야 했습니다. 라이트 테마 및 다크 테마를 에뮬레이팅하기 위한 새로운 바로가기

Chromium issue: 1314299

네트워크 창의 미리보기 탭 보안 개선

DevTools의 새로운 기능 중 하나로, 네트워크 창의 미리보기 탭에 콘텐츠 보안 정책(CSP)이 적용되었습니다.

예를 들어, 첫 번째 스크린샷을 보면 이 페이지에는 혼합 콘텐츠가 포함되어 있습니다. 이 페이지는 안전한 HTTPS 연결을 통해 로딩되지만, 스타일시트는 로딩을 위해 보안되지 않은 HTTP 연결을 이용합니다.

브라우저는 스타일시트 요청을 기본적으로 제한합니다. 그러나 이 페이지를 네트워크 창의 미리보기 탭을 통해 열었을 때, 이전에는 스타일시트의 요청이 제한되지 않았습니다. (따라서 배경이 붉게 바뀝니다.) 그러나 이제는 여러분이 기대하는 것처럼 요청이 받아들여지지 않습니다. 네트워크 창의 미리 보기 탭 보안 개선

Chromium issue: 833147

브레이크 포인트에서의 새로고침 개선

이제 브레이크 포인트에서 새로고침이 발생할 시, 스크립트 실행이 디버거에 의해 종료됩니다.

예를 들어, 리액트 데모 페이지 내부의 ReactDOM 브레이크포인트가 설정되고 새로고침될 때 이전에는 종료되지 않는 루프로 인해 소스 패널이 동작하지 않았습니다.

계속해서 자바스크립트를 실행하는 것은 개발자들에게 매우 많은 문제를 야기할 것이고, 또한 이는 렌더러를 깨진 상태로 남아 있게 할 수도 있습니다. 이 변경 사항은 디버깅 동작을 파이어폭스와 같은 다른 브라우저의 동작과 일치하도록 조정합니다. 브레이크 포인트에서의 개선된 새로고침

Chromium issues: 1014415, 1004038, 1112863, 1134899

콘솔 업데이트

콘솔에서의 스크립트 실행 오류 다루기

콘솔에서의 스크립트 평가 중 발생한 오류는 window.onerror 핸들러를 실행시키는 데 적절한 오류 이벤트를 생성하며, 이 이벤트는 윈도우 객체의 "error" 이벤트로 전달됩니다.

콘솔에서의 스크립트 실행 오류 다루기

Chromium issue: 1295750

엔터키로 라이브 표현식 행하기

이번 업데이트에서 여러분이 라이브 표현식을 타이핑한 후 실행하기 위해서는 Enter를 클릭하면 됩니다. 이전 버전에서는 Enter 키를 치면 새로운 라인이 추가되었으며, 이는 DevTools 의 다른 기능들과 일치하지 않았습니다.

라이브 표현식 편집기에서 새로운 라인을 추가하기 위해서는 Shift + Enter 를 사용하세요. 엔터키로 라이브 표현식 실행하기

Chromium issue: 1260744

시작 전에 유저 플로우 녹화 취소하기

이전 버전에서는 녹화를 취소할 수 있는 옵션이 없었으나 이제 유저 플로우 녹화 시작 중에도 취소가 가능해졌습니다.

시작 중에 유저 플로우 녹화 취소하기

Chromium issue: 1257499

스타일 창에 상속된 하이라이트 의사 요소들 표시하기

스타일 창에서 상속된 하이라이트 의사 요소들 (예시: ::selection, ::spelling-error, ::grammar-error, ::highlight)을 보세요. 이전에는 이 규칙들이 표시되지 않았습니다.

스펙 문서에 언급되었듯이 다중 스타일이 충돌을 일으킬 때, 캐스케이드가 가장 우선시되는 스타일을 결정합니다. 이 새로운 기능은 여러분들로 하여금 상속과 우선되는 규칙을 더 잘 이해할 수 있도록 해 줍니다.

현재는 이 기능을 활성화하기 위해서 --enable-blink-features=HighlightInheritance 플래그를 활성화하여 크롬을 실행하여야 합니다.

스타일 창에 상속된 하이라이트 의사 속성들 표시하기

Chromium issue: 1024156

기타 하이라이트

그 외 여러 가지 주목할 만한 개선점들이 추가되었습니다:

  • 이제 속성 창은 창은 이전 버전에서는 숨겨져 있었던 접근자 속성 값을 기본적으로 표시합니다. (1309087)
  • 스타일 창이 오버라이딩된 @support 규칙을 취소선으로 적절하게 표시하기 시작했습니다. 이전 버전에서는 취소선이 표시되지 않았습니다. (1298025)
  • 소스 창에서 CSS를 편집할 떄 여러 개의 빈 줄을 만들던 CSS 포매팅 로직이 현 버전에서 수정되었습니다.
  • 콘솔에 있는 객체의 재귀적으로 확장 옵션을 최대 100으로 제한하여 원형 개체에 대해 영원히 지속되지 않도록 합니다. (1272450)

[실험 기능] CSS에서의 변경사항 복사

이 기능을 활성화하기 위해, 설정 > 실험 으로 들어간 후 Sync CSS changes in the Styles pane 를 체크해 줍니다.

스타일 창은 여러분의 CSS 변경사항을 녹색으로 강조해 줍니다. 변경사항 위로 마우스를 가져간 다음 옆에 있는 복사 버튼을 클릭하여 복사할 수 있습니다.

그 외에도, 어떤 규칙 위에서 마우스 우클릭 후 모든 CSS 변경사항 복사 를 선택하여, 모든 변경사항들을 복사할 수 있습니다.

변경사항 탭에 새로운 복사 버튼이 추가되었으며, 이는 여러분들의 변경 이력을 추적하고 CSS 변경사항들을 쉽게 복사할 수 있도록 합니다. ] Copy CSS changes

Chromium issue: 1268754

[실험 기능] 브라우저 바깥의 색상 선택하기

이 기능을 활성화하기 위해 설정 > 실험 으로 들어간 후 Enable color picking outside the browser window 를 체크해 줍니다.

이전 버전에서는 브라우저 내부에서만 색상을 선택할 수 있었습니다만 실험 기능을 활성화하여, 브라우저 바깥의 색상을 컬러 피커를 통해 선택할 수 있습니다.

스타일 창에서 임의의 색상 미리보기를 클릭하여 컬러 피커를 열 수 있으며, 스포이드 아이콘을 이용하여 원하는 곳의 색상을 선택합니다. 브라우저 바깥의 색상 선택하기

Chromium issue: 1245191

프리뷰 채널 다운로드하기

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 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

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.