DevTools의 새로운 기능 (Chrome 110)

Jecelyn Yeen

새로고침 시 성능 패널 삭제

이제 프로파일링 시작 및 페이지 새로고침 버튼을 클릭하면 성능 패널에서 스크린샷과 트레이스가 모두 지워집니다.

이전에는 실적 패널에 이전 녹화의 스크린샷이 포함된 타임라인이 표시되었습니다. 이로 인해 실제 측정이 시작된 시점을 파악하기 어려웠습니다. 이제 패널은 항상 about:blank 페이지로 먼저 이동하여 녹화가 빈 트레이스에서 시작되도록 합니다. 이는 이미 동일한 작업을 수행한 실적 통계 패널과 일맥상통합니다.

새로고침 시 성능 패널이 삭제됨

Chromium 문제: 1101268, 1382044

녹음기 업데이트

녹음기에서 사용자 흐름의 코드 보기 및 강조 표시

이제 Recorder에서 분할 코드 보기를 제공하므로 사용자 흐름 코드를 더 쉽게 볼 수 있습니다. 코드 뷰에 액세스하려면 사용자 흐름을 열고 코드 표시를 클릭합니다.

Recorder를 사용하면 왼쪽의 각 단계 위로 마우스를 가져가면 해당 코드가 강조표시되어 흐름을 쉽게 추적할 수 있습니다. 드롭다운을 사용하여 코드 형식을 변경할 수 있으며, 이를 통해 Nightwatch 테스트 스크립트와 같은 형식을 전환할 수 있습니다.

녹음기의 코드 보기

Chromium 문제: 1385489

녹음의 선택기 유형 맞춤설정

중요한 선택기 유형만 캡처하는 녹음 파일을 만들 수 있습니다. 새 녹화 파일을 만들 때 선택기 유형을 맞춤설정하는 새로운 옵션을 사용하면 XPath와 같은 선택기를 포함하거나 제외하여 사용자 흐름에서 원하는 선택기만 캡처할 수 있습니다.

선택기 유형을 맞춤설정하는 새로운 옵션

Chromium 문제: 1384431

녹화 중에 사용자 플로우 수정

이제 녹음기에서 녹화 중에 편집할 수 있으므로 실시간으로 유연하게 변경할 수 있습니다. 더 이상 조정하기 위해 녹화를 종료할 필요가 없습니다.

사용자 플로우 녹화 중에 수정

Chromium 문제: 1381971

자동 인플레이스 멋진 출력

이제 소스 패널에서 축소된 소스 파일을 자동으로 멋진 형식으로 출력합니다. pretty print 버튼 { }를 클릭하여 실행취소할 수 있습니다.

이전에는 소스 패널에 기본적으로 축소된 콘텐츠가 표시되었습니다. 콘텐츠의 형식을 지정하려면 멋진 출력 버튼을 수동으로 클릭해야 했습니다. 또한 형식이 지정된 콘텐츠가 동일한 탭이 아닌 다른 ::formatted 탭에 표시되었습니다.

자동 인플레이스 pretty print 전후에 축소된 파일을 표시합니다.

Chromium 문제: 1383453, 1382752, 1382397

Vue, SCSS 등에 관한 향상된 구문 강조 표시 및 인라인 미리보기

소스 패널에서 널리 사용되는 여러 파일 형식의 구문 강조 표시가 향상되어 Vue, JSX, Dart, LESS, SCSS, SASS, 인라인 CSS 등 코드를 더 쉽게 읽고 구조를 파악할 수 있습니다.

Vue의 구문 강조 표시

또한 DevTools에서 Vue, 인라인 HTML, TSX의 인라인 미리보기가 개선되었습니다. 변수 위로 마우스를 가져가면 값을 미리 볼 수 있습니다.

Vue의 인라인 미리보기

그 외에도 이제 DevTools의 소스 패널에 스타일시트의 소스 맵이 표시됩니다. 예를 들어 SCSS 파일을 열면 sourcemap 링크를 클릭하여 관련 CSS 파일에 액세스할 수 있습니다.

SASS의 소스 맵 링크입니다.

Chromium 문제: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1392106, 1149734

콘솔의 인체공학적이며 일관된 자동 완성

DevTools는 다음과 같은 변경사항을 구현하여 자동 완성 환경을 개선합니다.

  • Tab은 항상 자동 완성에 사용됩니다.
  • Arrow right 및 Enter의 동작은 컨텍스트에 따라 다릅니다.
  • 자동 완성 환경은 텍스트 편집기, 콘솔, 소스, 요소 패널에서 일관됩니다.

예를 들어 Console에 cons를 입력하면 다음과 같은 상황이 발생합니다.

  • 콘솔에 자동 완성 추천 목록이 표시되며, 상단 옵션 주위에는 아직 탐색이 시작되지 않았음을 나타내는 점선 테두리가 표시됩니다. 상단 자동 완성 옵션 주위에 점선 테두리

  • Enter 키를 누르면 콘솔에서 해당 줄을 실행합니다. 이전에는 상단 추천으로 줄이 자동으로 완성되었습니다. 자동 완성을 사용하려면 Tab 또는 Arrow Right 키를 누릅니다. Enter 키를 누르면 해당 줄을 실행합니다.

  • Arrow up 및 Arrow down 단축키를 사용하여 추천 목록을 탐색할 때 Console에 선택된 옵션이 강조 표시됩니다. 추천 검색어 탐색 중 강조 표시

  • 탐색 중에 선택한 옵션으로 자동 완성하려면 키보드 키 Tab, Enter 또는 Arrow Right를 사용합니다. 탐색 중에 선택한 옵션으로 자동 완성합니다.

  • 코드 중간에서 수정할 때(예: 커서가 n와 s 사이에 있는 경우) 자동 완성에 Tab, 줄 실행에 Enter, 커서 앞으로 이동에 Arrow Right를 사용합니다. 코드 중간에 수정

Chromium 문제: 1399436, 1276960

기타 하이라이트

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

  • 인라인 스크립트의 debugger 문에 중지되지 않는 DevTools의 회귀 문제가 해결되었습니다. (1385374)
  • 기본적으로 console.trace() 메시지를 펼치거나 접을 수 있는 새로운 Console 설정입니다. 설정 > 환경설정 > 기본적으로 console.trace() 메시지 펼치기를 통해 설정을 전환합니다. (1139616)
  • 소스 패널의 스니펫 창은 콘솔과 마찬가지로 향상된 자동 완성을 지원합니다. (772949) 스니펫의 자동 완성

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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