DevTools의 새로운 기능 (Chrome 109)

Jecelyn Yeen

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

Recorder 패널의 새로운 복사 옵션

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

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

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

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

Chromium 문제: 1322313, 1351649, 1322313, 1339767

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

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

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

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

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

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

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

Chromium 문제: 1364601, 1364601

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

다음을 사용하여 소스 패널에서 탭 간에 전환할 수 있습니다. MacOS의 경우 Function + Command + up arrow 및 down arrow Windows 및 Linux의 경우 Control + Page up 또는 down

또한 Emacs와 마찬가지로 macOS에서 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 속성(인라인 높이 및 너비, flex 및 grid 속성)에 관한 더 많은 힌트를 지원합니다. (1373597, 1178508, 1178508,1178508)
  • 구문 강조 표시가 수정되었습니다. DevTools의 최근 코드 편집기 업그레이드 이후 제대로 작동하지 않았습니다. (1290182)
  • Recorder에서 on blur 이벤트 후 입력 변경 이벤트를 올바르게 캡처합니다. (1378488)
  • Recorder에서 더 나은 디버깅 환경을 위해 내보낼 때 Puppeteer 재생 스크립트를 업데이트합니다. (1351649)
  • 원격 디버깅을 위해 녹음기에서 녹음 및 재생을 지원합니다. (1185727)
  • var()에서 특수 CSS 변수 이름의 파싱을 수정했습니다. 이전에는 DevTools에서 var(--fo\ o)와 같은 이스케이프된 문자로 변수를 파싱하는 것을 지원하지 않았습니다. , (1378992)

[실험용] 브레이크포인트 관리의 향상된 UX

현재 Breakpoints 창은 모든 중단점을 한눈에 파악하는 데 도움이 되지 않습니다. 게다가 자주 사용하는 작업은 컨텍스트 메뉴 뒤에 숨겨져 있습니다.

이 실험용 UX 디자인을 통해 중단점 창에 구조가 도입되고 개발자는 중단점 수정 및 삭제와 같이 자주 사용되는 기능에 빠르게 액세스할 수 있습니다.

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

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

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

Breakpoint 창의 디자인 변경 전후

Chromium 문제: 1346231, 1324904

[실험용] 자동 인플레이스 멋진 레이아웃

이제 소스 패널에서 축소된 소스 파일을 자동으로 멋진 형식으로 표시합니다. 예쁜 값 출력 버튼 { }을 클릭하여 실행취소할 수 있습니다.

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

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

Chromium 문제: 1164184

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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