DevTools의 새로운 기능 (Chrome 107)

DevTools에서 단축키 맞춤설정

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

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

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

Chromium 문제: 1335274, 174309

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

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

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

Chromium 문제: 1280398, 1226363

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

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

주변 WebAssembly 메모리에서 객체의 바이트를 인식하는 것이 골치 아픈 문제였습니다. 객체의 크기를 알아야 하며 객체 시작 시점부터 바이트 수를 계산해야 합니다.

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

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

Chromium 문제: 1336568

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

이제 HAR 가져오기에 대한 전체 Initiator 정보가 제공됩니다. 이전에는 가져오기 중에 네트워크 패널에 시작자 정보만 일부 표시되었습니다.

시작자 정보를 통해 개발자는 네트워크 요청의 출처를 추적하고 네트워크 관련 문제를 식별할 수 있습니다.

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

Chromium 문제: 1343185

Enter 키를 누른 후 DOM 검색 시작

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

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

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

DOM 검색.

설정 > 환경설정으로 이동하여 입력과 동시에 검색을 사용 중지합니다. 이 변경사항이 적용되면 Enter 키를 눌러야만 검색이 시작됩니다.

실시간 검색 설정

Chromium 문제: 1344526

align-content CSS Flexbox 속성의 startend 아이콘 표시

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

정렬 콘텐츠 Flexbox 속성

Chromium 문제: 1139945

기타 주요 정보

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

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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

DevTools의 새로운 기능

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

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

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82가 취소되었습니다.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59