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

DevTools의 새로운 기능 (Chrome 109)

Jecelyn Yeen

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

Recorder 패널의 새로운 복사 옵션

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

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

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

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

Chromium 문제: 1322313, 1351649, 1322313, 1339767

공연 기록에서 실제 함수 이름 표시

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

성능 패널에 표시된 함수 이름의 전후 비교를 표시합니다.

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

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

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

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

Chromium 문제: 1364601, 1364601

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

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

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

그뿐 아니라 이제 DevTools에서 오른쪽 화살표를 사용하여 줄의 끝에만 자동 완성 기능을 사용할 수 있습니다. 예를 들어 코드 중간에서 무언가를 수정할 때 자동 완성 대화상자가 표시됩니다. 오른쪽 화살표 키를 누를 때는 커서를 자동 완성 대신 다음 위치로 설정하려고 할 가능성이 높습니다. 이 UX 변경사항은 작성 워크플로에 더 잘 부합합니다.

Chromium 문제: 1167965, 1172535, 1371585 1369503

JavaScript 디버깅 개선

다음은 이번 출시에서 몇 가지 자바스크립트 디버깅 개선사항입니다.

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

Chromium 문제: 1267690, 1246863 1371322, 1311637

기타 주요 정보

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

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

[실험용] 중단점 관리 UX 개선

현재의 Breakpoints 창에서는 모든 중단점을 시각적으로 확인할 수 있습니다. 또한 자주 사용하는 작업은 컨텍스트 메뉴 뒤에 숨겨져 있습니다.

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

주요 기능은 다음과 같습니다.

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

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

재설계 전과 후의 Breakpoint 창 표시

Chromium 문제: 1346231, 1324904

[실험용] 자동 삽입 프리티 프린팅

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

이전에는 Sources 패널에 기본적으로 축소된 콘텐츠가 표시되었습니다. 콘텐츠 형식을 지정하려면 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 동영상에 의견을 남겨주세요.