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

DevTools의 새로운 기능 (Chrome 109)

Jecelyn Yeen

레코더: 단계, 페이지 내 재생, 단계의 컨텍스트 메뉴의 옵션으로 복사

레코더 패널의 새로운 복사 옵션

레코더에서 기존 사용자 흐름을 엽니다. 이전에는 사용자 흐름을 다시 재생할 때 DevTools에서 항상 페이지로 이동하거나 페이지를 새로고침하여 다시 재생을 시작했습니다.

최신 업데이트를 통해 레코더에 탐색 단계가 별도로 표시됩니다. 마우스 오른쪽 버튼을 클릭하고 삭제하여 페이지 내에서 다시 재생할 수 있습니다.

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

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

Chromium 문제: 1322313, 1351649, 1322313, 1339767

성능 녹화 파일에 실제 함수 이름 표시

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

성능 패널에 표시되는 함수 이름의 전후 비교를 보여줍니다.

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

최소화 전후의 파일을 표시합니다.

이전에는 성능 패널에서 트레이스를 기록할 때 축소된 함수 이름만 표시되었습니다. 이로 인해 디버깅이 더 어려워졌습니다.

최신 변경사항에 따라 이제 DevTools에서 소스 맵을 읽고 실제 함수 이름과 소스 위치를 표시합니다.

Chromium 문제: 1364601, 1364601

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

다음 단축키를 사용하여 소스 패널의 탭 간에 전환할 수 있습니다. MacOS: 기능 + Command + 위쪽 화살표 및 아래쪽 화살표 Windows 및 Linux: Control + Page up 또는 down

또한 MacOS에서 Emacs와 마찬가지로 Ctrl + N 및 Ctrl + P를 사용하여 자동 완성 제안을 탐색할 수 있습니다. 예를 들어 Console에 window.를 입력하고 이러한 단축키를 사용하여 탐색할 수 있습니다.

또한 이제 DevTools는 줄 끝에서만 자동 완성에 오른쪽 화살표를 허용합니다. 예를 들어 코드 중간에서 항목을 수정할 때 자동 완성 대화상자가 표시됩니다. 오른쪽 화살표 키를 누르면 자동 완성 대신 커서를 다음 위치로 설정하고 싶을 것입니다. 이번 UX 변경사항은 제작 워크플로에 더 적합합니다.

Chromium 문제: 1167965, 1172535, 1371585 1369503

JavaScript 디버깅 개선

이번 출시의 JavaScript 디버깅 개선사항은 다음과 같습니다.

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

Chromium 문제: 1267690, 1246863, 1371322, 1311637

기타 주요 내용

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

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

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

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

이 실험적인 UX 재설계를 통해 중단점 창에 구조가 도입되고 개발자가 중단점 수정 및 삭제와 같은 일반적으로 사용되는 기능에 빠르게 액세스할 수 있습니다.

주요 내용은 다음과 같습니다.

두 일시중지 옵션은 모두 중단점 창에 있습니다. 옵션을 쉽게 이해할 수 있는 명시적인 텍스트 라벨이 있습니다.
중단점은 파일별로 그룹화되고 줄 또는 열 번호별로 정렬됩니다. 접거나 펼칠 수 있습니다.**
중단점 창에서 중단점 또는 파일 이름 위로 마우스를 가져갈 때 중단점을 삭제하고 수정하는 새로운 옵션

RFC (종료됨)에서 전체 변경사항을 읽고 여기에 의견을 남겨주세요.

리디자인 전후의 중단점 창을 보여줍니다.

Chromium 문제: 1346231, 1324904

[실험용] 자동 인플레이스 pretty print 적용

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

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

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

Chromium 문제: 1164184

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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