안녕하세요. 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 실험을 통해 이를 사용 설정할 수 있습니다. [crbug.com/131714]
힙 스냅샷의 메모리 통계 분석
기록된 힙 스냅샷을 볼 때 JavaScript의 어떤 측면이 가장 많은 메모리를 사용하고 있는지에 대해 시각적인 색으로 구분된 개요를 제공하는 stastics 파이 차트를 볼 수 있습니다. 현재 실험적 기능으로 '힙 스냅샷 통계'를 사용 설정하여 사용해 보세요. [crbug.com/346335]
래핑된 버전이 아닌 console.log의 원본 소스 보기
console.log 래퍼 함수가 있을 수 있지만 안타깝게도 콘솔의 모든 메시지가 util.js:46에서 제공됩니다. 이제 DevTools에서 원래 위치를 확인하도록 할 수 있습니다. 콘솔 로그 메시지를 래핑하는 파일을 “Skip step to sources with specific names” 입력 상자에 입력하면 DevTools가 이를 블랙박스 처리하고 로그 문의 실제 소스를 표시합니다. [crbug.com/231007]
작지만 강력한 추가 기능
JavaScript 이벤트 리스너를 동적으로 추가하거나 삭제한 후 요소 패널에서 Event Listeners 창을 새로고침합니다. [crbug.com/341044]
Ctrl+를 사용하여 콘솔 입력에 포커스를 둘 수 있습니다. 이 방법은 DevTools의 키보드 전용 워크플로에 유용할 수 있습니다. [crbug.com/144943]값 (점, 대시, 더블, 그루브)에 대한 테두리 스타일 자동 완성 추천이 사양과 일치하도록 업데이트되었습니다. [crbug.com/349998]
기본값 복원 및 새로고침 버튼 **이 설정 패널에 추가되었습니다. [crbug.com/135451]
현재 실험용 기능이며 왼쪽으로 도킹하여 워크플로에 적합한지 확인해 볼 수 있습니다. 다른 레이아웃 모드는 기본 창에 도킹 (오른쪽 또는 하단)하고 별도의 창으로 도킹 해제합니다. [crbug.com/134282]
이제 일반적인 클릭, 마우스 이동, 마우스다운 등의 이벤트에 더해 '휠'이 이벤트 리스너 중단점으로 제공됩니다. [crbug.com/347562]
오늘은 여기까지입니다. 읽어주셔서 감사합니다.