DevTools의 새로운 기능 (Chrome 107)

Jecelyn Yeen

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

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

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

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

Chromium 문제: 1335274, 174309

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

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

단축키로 밝은 테마와 어두운 테마 간에 전환합니다.

Chromium 문제: 1280398, 1226363

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

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

주변 WebAssembly 메모리에서 객체의 바이트를 인식하는 것은 고통스러운 일이었습니다. 객체의 크기를 알고 객체의 시작부터 바이트를 계산해야 합니다.

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

메모리 검사기에서 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 아이콘 표시

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

align-content 플렉스박스 속성

Chromium 문제: 1139945

기타 하이라이트

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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