DevTools의 새로운 기능 (Chrome 110)

Jecelyn Yeen

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

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

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

Chromium 문제: 1101268, 1382044

녹음기 업데이트

레코더에서 사용자 흐름의 코드를 확인하고 강조 표시하기

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

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

Chromium 문제: 1385489

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

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

Chromium 문제: 1384431

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

이제 레코더를 사용하면 녹음 중에 수정할 수 있어 실시간으로 변경할 수 있습니다. 더 이상 조정을 위해 녹화를 종료할 필요가 없습니다.

Chromium 문제: 1381971

자동 내부 pretty print

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

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

Chromium 문제: 1383453, 1382752, 1382397

Vue, SCSS 등의 구문 강조 표시 및 인라인 미리보기 개선

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

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

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

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

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

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

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

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

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

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

• 콘솔은 Arrow up 및 Arrow down 단축키를 사용하여 추천 목록을 탐색할 때 선택한 옵션을 강조 표시합니다.

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

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

Chromium 문제: 1399436, 1276960

기타 하이라이트

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

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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

DevTools의 새로운 기능

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