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

DevTools의 새로운 기능 (Chrome 107)

Jecelyn Yeen

DevTools에서 단축키 맞춤설정

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

설정 > 단축키로 이동하여 명령 위로 마우스를 가져간 다음 수정 버튼 (펜 아이콘)을 클릭하여 단축키를 맞춤설정합니다. 코드 (즉, 멀티 키 누름 단축키)를 만들 수도 있습니다.

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

Chromium 문제: 1335274, 174309

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

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

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

Chromium 문제: 1280398, 1226363

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

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

주변 WebAssembly 메모리에서 객체의 바이트를 인식하는 것이 어려운 일이었습니다. 객체의 크기와 객체를 시작할 때부터 바이트 수를 계산해야 합니다.

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

Memory Inspector에서 C/C++ 객체를 강조표시합니다.

Chromium 문제: 1336568

HAR 가져오기의 전체 개시자 정보 지원

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

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

HAR 가져오기의 전체 시작자 정보를 지원합니다.

Chromium 문제: 1343185

`Enter` 키를 누른 후 DOM 검색 시작

이제 입력과 동시에 검색 설정을 사용 중지하여 Enter 키를 누른 후 항상 DOM 검색을 시작할 수 있습니다.

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

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

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

Chromium 문제: 1344526

`align-content` CSS Flexbox 속성의 `start` 및 `end` 아이콘 표시

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

정렬 콘텐츠 Flexbox 속성.

Chromium 문제: 1139945

기타 주요 사항

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.

crbug.com을 통해 제안 또는 의견을 제출하세요.
DevTools에서 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다.
@ChromeDevTools로 트윗을 보냅니다.
DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 댓글을 남겨주세요.