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

DevTools의 새로운 기능 (Chrome 110)

Jecelyn Yeen

새로고침 시 성능 패널 지우기

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

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

새로고침 시 성능 패널 삭제

Chromium 문제: 1101268, 1382044

녹음기 업데이트

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

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

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

녹음기의 코드 보기

Chromium 문제: 1385489

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

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

선택자 유형을 맞춤설정하는 새로운 옵션입니다.

Chromium 문제: 1384431

녹화 중 사용자 플로우 수정

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

사용자 플로우 녹화 도중 편집

Chromium 문제: 1381971

자동 삽입 프리티 프린팅

이제 Sources 패널이 축소된 소스 파일을 제자리에 자동으로 인쇄합니다. pretty print 버튼 { }을 클릭하여 실행취소할 수 있습니다.

이전에는 Sources 패널에 기본적으로 축소된 콘텐츠가 표시되었습니다. 콘텐츠의 서식을 지정하려면 pretty print 버튼을 수동으로 클릭해야 했습니다. 뿐만 아니라 예쁘게 인쇄된 콘텐츠는 동일한 탭이 아닌 다른 ::formatted 탭에 표시되었습니다.

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

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, 139210613921061392106

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

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

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

예를 들어 콘솔에 cons를 입력하면 다음과 같은 결과가 발생합니다.

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

Chromium 문제: 1399436, 1276960

기타 주요 정보

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

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

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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