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를 입력하면 오류가 반환되었습니다. new.target 평가 디버깅의 전후 비교를 표시합니다.
  • WeakRef 객체를 사용하면 객체가 가비지 수집되지 않도록 방지하지 않고 다른 객체에 대한 약한 참조를 보유할 수 있습니다. 이제 DevTools는 디버깅 중에 값의 인라인 미리보기를 표시하고 콘솔에서 약한 참조를 직접 평가합니다. 이전에는 이를 해결하기 위해 명시적으로 'deref'를 호출해야 했습니다. 디버깅 중에 WeakRef 평가의 전후 비교를 표시합니다.
  • 섀도우 처리된 변수의 인라인 미리보기를 수정했습니다. 이전에는 표시 값이 잘못되었습니다. 섀도잉된 변수의 전후 비교 인라인 미리보기를 표시합니다.
  • 소스 패널의 범위 창에서 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와 관련된 기타 사항을 논의하세요.

DevTools의 새로운 기능

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