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

DevTools의 새로운 기능 (Chrome 109)

Jecelyn Yeen

녹음기: 단계 옵션으로 복사, 인페이지 재생, 단계의 컨텍스트 메뉴

Recorder 패널의 새로운 복사 옵션

Recorder에서 기존 사용자 플로우를 엽니다. 이전에는 사용자 플로우를 재생하면 DevTools가 항상 페이지로 이동하거나 새로고침하여 재생을 시작했습니다.

최신 업데이트에서는 Recorder에 탐색 단계가 별도로 표시됩니다. 마우스 오른쪽 버튼을 클릭하고 삭제하면 인페이지 다시보기를 실행할 수 있습니다.

그 외에도 전체 사용자 플로우를 내보내는 대신 단계를 마우스 오른쪽 버튼으로 클릭하고 *Recorder 패널의 클립보드에 복사할 수 있습니다. 확장 프로그램과도 호환됩니다. 예를 들어 단계를 야간 시청 테스트 스크립트로 복사해 보세요. 이 기능을 사용하면 기존 스크립트를 쉽게 업데이트할 수 있습니다.

이전에는 점 3개 버튼을 통해서만 단계 메뉴에 액세스할 수 있었습니다. 이제 단계의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하여 메뉴에 액세스할 수 있습니다.

Chromium 문제: 1322313, 1351649, 1322313, 1339767

성능 기록에 실제 함수 이름 표시

소스 맵이 있는 경우 이제 성능 패널에 트레이스에 실제 함수 이름과 소스가 표시됩니다.

성능 패널에 표시된 함수 이름 비교 전후에 표시

이 예에서는 소스 파일이 프로덕션 단계에 걸쳐 축소됩니다. 예를 들어 이 데모에서 sayHi 함수는 n로 축소되고 takeABreak 함수는 o로 축소됩니다.

압축하기 전후의 파일을 표시합니다.

이전에는 Performance 패널에서 트레이스를 기록하면 트레이스에 축소된 함수 이름만 표시되었습니다. 이로 인해 디버그하기가 더 어려워졌습니다.

최신 변경사항으로 인해 DevTools가 이제 소스 맵을 읽고 실제 함수 이름과 소스 위치를 표시합니다.

Chromium 문제: 1364601, 1364601

Console 및 소스 패널의 새로운 단축키

MacOS의 경우 Function + Command + 위쪽 화살표 및 아래쪽 화살표를 사용하여 Sources 패널에서 탭 간에 전환할 수 있습니다. Windows 및 Linux의 경우 Control + Page Up 또는 down

또한 Emacs와 유사하게 MacOS에서 Ctrl + N 및 Ctrl + P를 사용하여 자동 완성 추천 용어를 탐색할 수 있습니다. 예를 들어 Console에 window.를 입력하고 다음 단축키를 사용하여 탐색할 수 있습니다.

그 외에도 이제 DevTools에서 줄 끝에서만 자동 완성에 대해 오른쪽 화살표를 허용합니다. 예를 들어 코드 중간에 무언가를 수정할 때 자동 완성 대화상자가 표시됩니다. 오른쪽 화살표 키를 누르면 대부분 자동 완성이 아닌 다음 위치로 커서를 설정하려고 합니다. 이러한 UX 변경사항은 작성 워크플로에 더 잘 부합합니다.

Chromium 문제: 1167965, 1172535, 1371585. 1369503

자바스크립트 디버깅 개선

다음은 이번 출시의 자바스크립트 디버깅 개선사항입니다.

new.target는 함수 또는 생성자가 새 연산자를 사용하여 호출되었는지 감지할 수 있는 메타 속성입니다. 이제 콘솔에 new.target를 기록하여 디버깅 중에 값을 확인할 수 있습니다. 이전에는 new.target를 입력하면 오류가 반환되었습니다.
WeakRef 객체를 사용하면 다른 객체에 대한 약한 참조를 유지하지 않고도 해당 객체가 가비지로 수집되는 것을 방지할 수 있습니다. 이제 DevTools가 값의 인라인 미리보기를 표시하고 디버깅 중에 콘솔에서 직접 약한 참조를 평가합니다. 이전에는 이 문제를 해결하려면 'deref(참조 해제)'를 명시적으로 호출해야 했습니다.
그림자가 있는 변수의 인라인 미리보기를 수정했습니다. 이전에는 표시 값이 잘못되었습니다.
Sources 패널의 Scope 창에 있는 Generator 및 async 함수의 변수 이름을 가독화합니다.

Chromium 문제: 1267690, 1246863 1371322, 1311637

기타 주요 사항

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

Styles 창에서 비활성 CSS 속성에 대해 인라인 높이 및 너비, 가변 및 그리드 속성 등 더 많은 힌트를 지원합니다. (1373597, 1178508, 1178508,1178508)
구문 강조표시가 수정되었습니다. 최근 DevTools에서 코드 편집기를 업그레이드한 이후 제대로 작동하지 않았습니다. 추가했습니다. (1290182)
Recorder에서 블러 이벤트 후에 입력 변경 이벤트를 제대로 캡처합니다. 추가했습니다. (1378488)
내보내기 시 Puppeteer 재생 스크립트를 업데이트하여 Recorder의 디버깅 환경을 개선합니다. 추가했습니다. (1351649)
원격 디버깅을 위해 Recorder에서 녹화 및 재생을 지원합니다. 추가했습니다. (1185727)
var()에서 특수 CSS 변수 이름의 파싱이 수정되었습니다. 이전에는 DevTools에서 var(--fo\ o)와 같이 이스케이프된 문자로 변수를 파싱하는 기능을 지원하지 않았습니다. (1378992)

[실험용] 중단점 관리의 향상된 UX

현재 Breakpoints 창은 모든 중단점을 감독하는 데 거의 도움이 되지 않습니다. 또한 자주 사용하는 작업은 컨텍스트 메뉴 뒤에 숨겨집니다.

이 실험용 UX 재설계에서는 Breakpoints 창에 구조를 더하고 개발자는 중단점 수정 및 삭제와 같이 흔히 사용되는 기능에 빠르게 액세스할 수 있습니다.

다음은 몇 가지 주요 사항입니다.

두 일시중지 옵션은 모두 Breakpoints 창에 있습니다. 옵션에 설명이 필요 없는 명시적 텍스트 라벨이 있습니다.
중단점은 파일별로 그룹화되며 행 또는 열 번호로 정렬됩니다. 접거나 펼칠 수 있습니다.**
Breakpoint 창에서 중단점이나 파일 이름에 마우스를 가져가면 중단점을 삭제하고 수정하는 새로운 옵션이 제공됩니다.

RFC (폐쇄됨)의 전체 변경사항을 읽고 여기에 의견을 남기세요.

재설계 전후에 중단점 창 표시

Chromium 문제: 1346231, 1324904

[실험용] 자동 전면 프리티 프린트

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

이전에는 소스 패널에 축소된 콘텐츠가 기본적으로 표시되었습니다. 콘텐츠 형식을 지정하려면 Pretty Print 버튼을 수동으로 클릭해야 했습니다. 그 외에도 예쁘게 인쇄된 콘텐츠가 동일한 파일에 표시되지 않고 다른 ::formatted 탭에 표시되었습니다.

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

Chromium 문제: 1164184

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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