DevTools 의 새로운 기능 (Chrome 108)

Published on

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

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

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

비활성화된 CSS 프로퍼티에 대한 힌트

이제 DevTools는 유효하지만 시각적 효과를 가지고 있지 않은 CSS 스타일들을 식별합니다. Style 창에서 DevTools는 비활성화된 프로퍼티들을 페이드아웃시킵니다. 규칙이 시각적 효과가 없는 이유를 이해하기 위해서 그 옆의 아이콘 위로 마우스를 가져가 보세요.

비활성화된 CSS 프로퍼티에 대한 힌트.

Chromium issue: 1178508

Recoder 패널에서 XPath와 텍스트 셀렉터의 자동 인식

Recoder 패널은 이제 XPath 와 텍스트 셀렉터를 지원합니다. 유저 플로우 레코딩 시작 이후 레코더는 사용가능한 경우, 자동적으로 요소의 XPath 와 가장 짧은 고유한 텍스트를 셀렉터로 선택합니다.

Recorder 패널에서의 XPath와 텍스트 셀렉터.

Chromium issues: 1327206,[1327209] (https://crbug.com/1327209)

쉼표로 구분된 표현을 통해 다음 행으로 건너뛰기

이제 여러분은 디버깅 중에 쉼표로 구분된 표현식을 통해 다음 행으로 건너갈 수 있습니다. 이는 최소화된 코드의 디버깅 가능성을 개선할 수 있습니다. 쉼표로 구분된 표현식을 통해 다음 행으로 진행

DevTools는 이전 버전까지는 오직 세미콜론으로 구분된 표현식을 통한 진행만을 지원했습니다.

아래 예시 코드에서 보듯이,

function foo() {}

function bar() {
foo();
foo();
return 42;
}

트랜스파일러와 미니파이어가 이들을 쉼표로 구분된 표현식으로 바꿀지도 모릅니다.

function bar(){return foo(),foo(),42}

이렇게 하면 축소된 코드와 작성된 코드 간에 동작이 다르기 때문에 디버깅 중에 혼란을 야기합니다. 소스 맵을 사용하여 축소된 코드를 원래 코드와 관련지어 디버깅할 때 개발자가 세미콜론(툴체인에 의해 쉼표로 바뀐 후드 아래에 있음)을 보고 있음에도 디버거가 멈추지 않기 때문에 훨씬 혼란을 가중시킵니다.

Chromium issue: 1370200

개선된 무시 목록 설정

설정에서 무시 목록으로 들어갈 수 있습니다. DevTools 는 여러분들이 단일 스크립트 혹은 스크립트들의 패턴을 무시할 수 있는 규칙들을 잘 구성할 수 있도록 디자인을 개선합니다.

무시 목록 탭

Chromium issue: 1356517

기타 하이라이트

이번 릴리스에서 주목할 만한 수정 사항들입니다:

  • 스타일 창에서 스페이스바를 누르면 CSS 프로퍼티 이름이 자동으로 완성됩니다. (1343316)
  • 요소 패널의 이동 경로에서 자동 스크롤을 삭제합니다. (1369734)

프리뷰 채널 다운로드하기

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 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Updated on Improve article

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