DevTools 의 새로운 기능 (Chrome 107)

Published on

Translated to: English, Español, Português, 中文, Pусский, 日本語

이 게시글의 번역에는 조은님이 참여하였으며, 최원영 님과 도창욱님이 리뷰를 맡아 주셨습니다.

DevTools를 개선하는 데 도움을 주고 싶으신가요? Google User Research 에 참여해보세요.

DevTools 에서 키보드 단축키 커스터마이징

DevTools 에서 선호하는 명령어에 대한 키보드 단축키를 커스터마이징할 수 있습니다.

설정 > Shortcuts 로 들어가서, 명령어에 마우스를 올린 뒤 Edit 버튼 (펜 아이콘)을 클릭하여 키보드 단축키를 커스터마이징할 수 있습니다. 조합형 단축키 (여러 키를 클릭하는 단축키)를 생성할 수도 있습니다.

DevTools에서 키보드 단축키 커스터마이징

Chromium issues: 1335274, 174309

키보드 단축키로 라이트 / 다크 테마 전환하기

편리하게 라이트 / 다크 테마 를 전환하는 키보드 단축키를 설정할 수 있습니다. 기본적으로는 이 전환 액션에 대한 키보드 단축키가 설정되어 있지 않습니다.

키보드 단축키로 라이트 / 다크 테마 전환하기

Chromium issues: 1280398, 1226363

메모리 인스펙터에서 C/C++ 객체 하이라이팅

메모리 인스펙터 에서 모든 C/C++ 메모리 객체의 바이트를 강조 표시합니다.

웹 어셈블리 주변 메모리에서 객체의 바이트를 인식하는 건 골칫거리였습니다. 기존에는 객체의 시작부터 객체의 크기와 바이트를 알아야 했습니다.

이 기능은 주변 메모리에서 분리하는 데 도움을 줍니다. C/C++ 디버깅을 위한 메모리 인스펙터 확장 에서 이 변경점을 더 상세하게 알아볼 수 있습니다.

메모리 인스펙터에서 C/C++ 객체 하이라이팅

Chromium issue: 1336568

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

HAR 가져오기 에서 전체 이니시에이터 정보를 지원합니다. 이전에는 네트워크 패널에서 가져오기를 수행할 때 일부 이니시에이터 정보만 보여줬습니다.

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

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

Chromium issue: 1343185

Enter 키를 눌러 DOM 검색 시작

Enter 키를 누른 후 항상 DOM 검색을 시작하는 Search as you type 설정을 비활성화할 수 있습니다.

요소 패널에서 Control 이나 Command + F 키를 통해 검색바를 전환합니다. 검색 입력창에서 쿼리를 입력하면 기본 동작으로 DOM 트리가 첫번째로 일치한 요소로 이동하고 강조 표시합니다.

사용자, 특히 항상 긴 검색 쿼리로 작업하는 테스터들에게는 이 동작이 적합하지 않습니다. DOM 트리가 긴 검색 쿼리 (예시: //div[@id="example"])로 인해 여러번 이동할 수 있습니다. 이러한 동작은 불필요한 움직임을 만듭니다.

DOM 검색

설정 > 환경 설정 에서 Search as you type 을 비활성화하세요. 이 변경사항을 통해 Enter 키를 누른 경우에만 검색이 시작되게 할 수 있습니다.

Search as you type 설정

Chromium issue: 1344526

CSS flexbox align-content startend 아이콘 표시

스타일 영역에서 display: flexdisplay: inline-flex 로 선언된 CSS 클래스 내 align-content 속성을 수정합니다. 자동완성에서 startend 가 아이콘과 함께 나타납니다.

flexbox align-content 속성

Chromium issue: 1139945

기타 하이라이트

  • 콘솔 사이드바에서 올바른 메시지 갯수를 보여줍니다. 이전에는 콘솔 메시지를 클리어했을 때 갯수가 올바르게 새로고침되지 않았습니다. (1343311)

프리뷰 채널 다운로드하기

Chrome Canary, Dev, Beta 를 기본 개발용 브라우저로 사용해보는 걸 검토해보세요. 프리뷰 채널에서는 최신 DevTools 기능들을 사용할 수 있고, 갓 나온 웹 플랫폼 API를 테스트해 볼 수 있으며, 사용자들이 사이트의 문제를 보기전에 미리 찾아낼 수 있습니다.

Chrome DevTools 팀과 이야기 나누기

아래 옵션을 사용하여 게시물의 새로운 기능 및 변경 사항, 또는 DevTools 관련된 기타 사항에 토론해보세요.

  • crbug.com 를 이용한 피드백 및 제안 전달하기.
  • DevTools 에서 More options   More   > Help > Report a DevTools issues 를 사용하여 DevTools 이슈 제보하기.
  • @ChromeDevTools 에 트윗하기.
  • What's new in DevTools YouTube 비디오 에 댓글 남기기.

더 많은 DevTools 기능

What's New In DevTools 영어 버전을 참고하여 관련 기능의 전체 목록을 볼 수 있습니다. 아래 콘텐츠들은 한국어로 번역된 콘텐츠들입니다.

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.