DevTools의 새로운 기능 (Chrome 108)

Jecelyn Yeen

비활성 CSS 속성에 대한 힌트

이제 DevTools에서 유효하지만 표시되는 효과가 없는 CSS 스타일을 식별합니다. 스타일 창에서 DevTools는 비활성 속성을 흐리게 표시합니다. 규칙 옆에 있는 아이콘 위로 마우스를 가져가면 규칙이 표시되지 않는 이유를 알 수 있습니다.

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

Chromium 문제: 1178508

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

이제 녹음기 패널에서 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

기타 하이라이트

이번 출시 버전의 주목할 만한 수정사항은 다음과 같습니다.

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

다음 옵션을 사용하여 새로운 기능, 업데이트 또는 DevTools와 관련된 기타 사항을 논의하세요.

DevTools의 새로운 기능

DevTools의 새로운 기능 시리즈에서 다룬 모든 항목의 목록입니다.