DevTools의 새로운 기능 (Chrome 107)

Jecelyn Yeen

DevTools에서 단축키 맞춤설정하기

이제 DevTools에서 좋아하는 명령어의 단축키를 맞춤설정할 수 있습니다.

설정 > 단축키로 이동하여 명령어 위로 마우스를 가져간 다음 수정 버튼 (연필 아이콘)을 클릭하여 단축키를 맞춤설정합니다. 코드 (다중 키 누르기 단축키라고도 함)도 만들 수 있습니다.

DevTools에서 단축키를 맞춤설정합니다.

Chromium 문제: 1335274, 174309

단축키로 밝은 테마와 어두운 테마 전환하기

단축키를 구성하여 밝은 테마와 어두운 테마를 편리하게 전환할 수 있습니다. 기본적으로 이 작업은 단축키에 매핑되지 않습니다.

단축키를 사용하여 밝은 테마와 어두운 테마를 전환합니다.

Chromium 문제: 1280398, 1226363

메모리 검사기에서 C/C++ 객체 강조 표시

메모리 검사기는 C/C++ 메모리 객체의 모든 바이트를 강조 표시합니다.

주변 WebAssembly 메모리에서 객체의 바이트를 인식하는 것이 골칫거리였습니다. 객체의 크기를 알고 객체의 시작 부분부터 바이트를 계산해야 합니다.

이 기능을 사용하면 주변 메모리와 구분할 수 있습니다. 변경사항에 관한 자세한 내용은 C/C++ 디버깅을 위한 메모리 검사기 확장을 참고하세요.

메모리 검사기에서 C/C++ 객체를 강조 표시합니다.

Chromium 문제: 1336568

HAR 가져오기에 대한 전체 이니시에이터 정보 지원

이제 HAR 가져오기에 전체 이니셔터 정보를 사용할 수 있습니다. 이전에는 네트워크 패널에 가져오기 중에 일부 시작자 정보만 표시되었습니다.

이니시에이터 정보는 개발자가 네트워크 요청의 출처를 추적하고 네트워크 관련 문제를 식별하는 데 도움이 됩니다.

HAR 가져오기에 대한 전체 이니시에이터 정보를 지원합니다.

Chromium 문제: 1343185

Enter를 누른 후 DOM 검색 시작

이제 Enter 키를 누른 후 항상 DOM 검색을 시작하도록 실시간 검색 설정을 사용 중지할 수 있습니다.

요소 패널에서 Ctrl 또는 Command + F를 사용하여 검색창을 전환합니다. 검색 텍스트 상자에 검색어를 입력하면 DOM 트리가 일치하는 첫 번째 요소로 이동하여 기본적으로 강조 표시합니다.

사용자, 특히 항상 긴 검색어를 사용하는 테스터에게는 이 동작이 이상적이지 않습니다. 긴 검색어 (예: //div[@id="example"])를 입력할 때 DOM 트리가 여러 번 점프할 수 있습니다. 이 동작으로 인해 불필요한 모션이 발생합니다.

DOM 검색

설정 > 환경설정으로 이동하여 입력 중 검색을 사용 중지합니다. 이번 변경으로 Enter 키를 누른 후에만 검색이 시작됩니다.

실시간 검색 설정

Chromium 문제: 1344526

align-content CSS flexbox 속성에 start 및 end 아이콘 표시

스타일 창에서 CSS 클래스의 align-content 속성을 display: flex 또는 display: inline-flex로 수정합니다. start 및 end는 자동 완성 드롭다운에 아이콘과 함께 표시됩니다.

align-content flexbox 속성

Chromium 문제: 1139945

기타 하이라이트

  • Console 사이드바에 올바른 메시지 수를 표시합니다. 이전에는 콘솔 메시지를 지울 때 수가 새로고침되지 않았습니다. (1343311)

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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