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

DevTools의 새로운 기능 (Chrome 110)

Jecelyn Yeen

새로고침 시 성능 패널 삭제

이제 Start profiling and refresh page 버튼을 클릭하면 Performance 패널에서 스크린샷과 트레이스가 모두 삭제됩니다.

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

새로고침 시 성능 패널을 삭제하는 중입니다.

Chromium 문제: 1101268, 1382044

녹음기 업데이트

녹음기에서 사용자 플로우 코드 확인 및 강조 표시

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

왼쪽의 각 단계 위로 마우스를 가져가면 Recorder에서 해당하는 코드를 강조표시하므로 흐름을 쉽게 추적할 수 있습니다. 야간 시청 테스트 스크립트와 같은 형식 간에 전환할 수 있는 드롭다운을 사용하여 코드 형식을 변경할 수 있습니다.

녹음기의 코드 뷰

Chromium 문제: 1385489

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

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

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

Chromium 문제: 1384431

녹화 중 사용자 플로우 수정

이제 녹음기를 사용하면 녹화 중에 수정할 수 있으므로 실시간으로 유연하게 변경할 수 있습니다. 더 이상 조정을 위해 녹화를 종료하지 않아도 됩니다.

사용자 플로우 녹화 중 편집

Chromium 문제: 1381971

자동 인플레이스 프리티트 프린트

이제 Sources 패널에서 축소된 소스 파일이 제자리에 자동으로 예쁘게 인쇄됩니다. 프리티 프린트 버튼 { }을 클릭하면 실행취소할 수 있습니다.

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

자동 인플레이스 프리티트(In-Place) 프리티 프린트 전후에 축소된 파일을 표시합니다.

Chromium 문제: 1383453, 1382752, 1382397

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

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

Vue.

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

Vue의 인라인 미리보기

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

SASS의 소스 맵 링크

Chromium 문제: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1383451, 13951,106{/17

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

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

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

예를 들어 Console에서 cons를 입력하면 다음과 같이 됩니다.

Console에는 자동 완성 추천 검색어 목록이 표시되며, 상단 옵션 주위에 점선으로 표시된 테두리는 탐색이 아직 시작되지 않았음을 나타냅니다.
Enter를 누르면 콘솔이 줄을 실행합니다. 이전에는 자동으로 최상위 제안이 있는 줄을 완성했습니다. 자동 완성하려면 Tab 또는 Arrow Right 키를 누르세요.
Arrow up 및 Arrow down 단축키를 사용하여 추천 목록을 탐색하면 콘솔에 선택된 옵션이 강조표시됩니다.
탐색 중에 선택한 옵션으로 자동 완성하려면 키보드 키 Tab, Enter 또는 Arrow Right를 사용하세요.
코드 중간에 수정할 때(예: 커서가 n와 s 사이에 있을 때) 자동 완성에는 Tab를, 줄을 실행하려면 Enter를, 커서를 앞으로 이동하려면 Arrow Right를 사용합니다.

Chromium 문제: 1399436, 1276960

기타 주요 사항

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

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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