안녕하세요. DevTools 다이제스트의 지난 호에서는 강력한 비동기 호출 스택과 기타 몇 가지 항목을 살펴봤습니다. 이번 버전에서는 자동 완성 기능이 포함된 향상된 네트워크 패널 필터링, Shadow DOM 콘텐츠를 사용한 수정 기능, CodeMirror 4 업데이트 등을 확인할 수 있습니다.
네트워크 패널 필터링
이제 도메인과 같은 특정 필드로 리소스를 필터링할 수 있습니다. 한 가지 필터 형식은 Domain:website.com입니다. 필터링 외에도 검색어를 입력할 때 실시간으로 업데이트되는 유효한 필터 값에 대한 자동 완성 추천을 받을 수 있습니다. 특정 도메인에서 제공하는 모든 리소스를 찾을 때 유용합니다. [crbubg.com/258421]
Shadow DOM 콘텐츠 수정
DevTools는 항상 Elements 패널에서 일반 HTML을 수정할 수 있었으며, 이제 이러한 기능이 Shadow DOM의 요소 부분으로 확장됩니다. [crbug.com/348991]
CodeMirror 4.0으로 업그레이드
소스 패널의 일부로 사용되는 JavaScript 기반 텍스트 편집기인 CodeMirror가 버전 4로 업그레이드되었습니다. 그 결과 많은 새로운 기능이 추가되었습니다. crbug.com/356878]
CSS 속성 빠른 검색
이제 스타일 창의 새 검색창에서 속성 이름, 값 또는 규칙 선택기를 검색할 수 있습니다. 검색어를 입력하면 결과가 실시간으로 강조 표시됩니다. [crbug.com/278852]
콘솔 메시지 옆의 타임스탬프
메시지를 빠르게 연속으로 로깅할 때는 메시지가 로깅된 정확한 시간을 확인하는 것이 유용할 수 있습니다. DevTools Experiments를 통해 사용 설정할 수 있습니다. [crbug.com/131714]
힙 스냅샷의 메모리 통계 분석
기록된 힙 스냅샷을 볼 때 stastics 원형 차트는 JavaScript에서 가장 많은 메모리를 소비하는 측면에 대한 시각적이고 색상으로 구분된 개요를 제공합니다. 현재 실험용 기능이므로 '힙 스냅샷 통계'를 사용 설정하여 사용해 보세요. [crbug.com/346335]
래핑된 버전이 아닌 console.log 원본 소스 보기
console.log 래퍼 함수가 있을 수 있지만 안타깝게도 콘솔에서 모든 메시지는 util.js:46과 같은 곳에서 가져옵니다. 이제 DevTools에서 원래 위치를 확인할 수 있습니다. '특정 이름의 소스 단계 건너뛰기' 입력 상자에 콘솔 로그 메시지를 래핑하는 파일을 입력하여 DevTools에서 이를 블랙박스 처리한 후 로그 문에 대한 실제 소스를 표시합니다. [crbug.com/231007]
작지만 강력한 몇 가지 추가 기능
JavaScript 이벤트 리스너를 동적으로 추가하거나 삭제한 후에 Elements 패널에서 Event Listeners 창을 새로고침합니다. [crbug.com/341044]
Ctrl+를 사용하여 콘솔 입력에 포커스를 설정할 수 있습니다. 이는 DevTools의 키보드 전용 워크플로에 유용할 수 있습니다. [crbug.com/144943]값 (dotted, dashed, double, groove)의 border-style 자동 완성 추천이 사양에 맞게 업데이트되었습니다. [crbug.com/349998]
기본값 복원 및 새로고침 버튼이 설정 패널에 추가되었습니다. 이 버튼을 클릭하면 설명과 똑같이 작동합니다. [crbug.com/135451]
현재 실험용 기능인 왼쪽에 고정을 사용해 보고 워크플로에 적합한지 확인해 보세요. 다른 레이아웃 모드는 기본 창 (오른쪽 또는 하단)에 도킹하고 별도의 창으로 도킹 해제하는 것입니다. [crbug.com/134282]
이제 'wheel'이 일반적인 click, mousemove, mousedown 등의 이벤트 외에도 이벤트 리스너 브레이크포인트로 제공됩니다. [crbug.com/347562]
오늘은 여기까지입니다. 읽어주셔서 감사합니다.