이 페이지는 Cloud Translation API를 통해 번역되었습니다.

DevTools의 새로운 기능 (Chrome 108)

Jecelyn Yeen

비활성 CSS 속성에 대한 힌트

이제 DevTools가 유효하지만 시각적 효과가 없는 CSS 스타일을 식별합니다. Styles 창에서 DevTools가 비활성 속성을 페이드아웃합니다. 규칙 옆에 있는 아이콘 위로 마우스를 가져가면 규칙이 눈에 띄는 효과가 없는 이유를 확인할 수 있습니다.

비활성 CSS 속성에 대한 힌트입니다.

Chromium 문제: 1178508

Recorder 패널에서 XPath 및 텍스트 선택기 자동 감지

이제 Recorder 패널에서 XPath 및 텍스트 선택기를 지원합니다. 사용자 플로우 기록을 시작하면 레코더가 자동으로 요소의 XPath 및 가장 짧은 고유 텍스트를 선택기로 선택합니다(사용 가능한 경우).

Recorder 패널의 XPath 및 텍스트 선택기

Chromium 문제: 1327206,1327209

쉼표로 구분된 표현식 탐색

이제 디버깅 중에 쉼표로 구분된 표현식을 단계별로 실행할 수 있습니다. 이렇게 하면 축소된 코드의 디버그 가능성이 향상됩니다.

쉼표로 구분된 식을 단계별로 실행합니다.

이전에 DevTools는 세미콜론으로 구분된 표현식을 통한 스테핑만 지원했습니다.

아래의 코드가 주어지면

function foo() {}

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

트랜스파일러와 축소기는 쉼표로 구분된 식으로 변환할 수 있습니다.

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

이렇게 하면 축소된 코드와 작성된 코드 간에 단계별 실행 동작이 다르기 때문에 디버깅 중에 혼동이 발생합니다. 소스 맵을 사용하여 원본 코드 측면에서 축소된 코드를 디버그하는 경우 개발자는 세미콜론 (도구 모음에 의해 내부적으로 쉼표로 전환된 상태)을 확인하지만 디버거는 세미콜론을 멈추지 않기 때문에 훨씬 더 혼란스럽습니다.

Chromium 문제: 1370200

무시 목록 설정 개선

설정 > 무시 목록으로 이동합니다. DevTools는 단일 스크립트 또는 스크립트 패턴을 무시하도록 규칙을 구성하는 데 도움이 되도록 디자인을 개선했습니다.

무시 목록 탭.

Chromium 문제: 1356517

기타 주요 사항

다음은 이번 버전에서 주목할 만한 수정사항입니다.

스페이스바를 누르면 Styles 창에 CSS 속성 이름이 자동 완성됩니다. 추가했습니다. (1343316)
요소 패널의 탐색경로에서 자동 스크롤을 제거합니다. 추가했습니다. (1369734)

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.

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