What's new in Chrome DevTools 2019

2018년 구글 I/O에는 세션What's new in Chrome DevTools이 있어 1년간 DevTools 업데이트 내용을 파악할 수 있어 좋았지만, 2019년 구글 I/O는 아쉽게도 세션이 없어 스스로 시도해 봤다.
해당 튜토리얼 영상에도 링크가 붙기 때문에 글을 모르는 분들은 영상에서 확인하세요!
참고로 2018년의 업데이트 내용은 회화 영상을 바탕으로 하고 제 쪽에도 슬라이드 형식으로 정리한 자료가 있으니 안 보신 분들도 협조해 주세요!
What's new in Chrome DevTools in Google I/O 2018 슬라이드
그럼 2019년용What's new in Chrome DevTools 주세요!

JavaScript

Eager Evaluation (v68) 비디오

console 설정Eager evaluation에서 ON으로 설정하면 방법이 실행되기 전에 결과가 constore에 표시됩니다.

정규 표현식의 타당성을 검사할 때 사용하면 매우 편리할 것이다.
지금까지는 캐너리 버전만 사용할 수 있었지만, 이 버전부터 일반 버전도 사용할 수 있다.

Argument Hints (v68) 비디오

console에서 함수를 사용할 때 매개 변수 알림을 표시합니다.

Autocomplete After Invoking Functions (v68) 비디오

함수가 실행하는 반환값도 autoocomplete를 표시할 수 있습니다.

Live Expressions in the console (v70) 비디오

console의 1 표시를 누르면 표시할 텍스트 입력란이 항상 평가됩니다.
프레젠테이션에서 document.activeElement를 입력했기 때문에 초점 요소가 변할 때 아래에 표시된 결과가 변합니다.

Store DOM nodes as global variables (v71) 비디오

Element 패널에서dom를 선택한 후 우클릭Store as global variable을 선택하면 temp${N}의 전역 변수에 추가됩니다.

다음 콘솔에서 선택한dom를 사용할 수 있습니다.

Logpoint (v73) 비디오

디버깅 시 쓰기 console.log(), 실행, 결과 확인, 삭제 console.log 라는 절차가 필요 없습니다.
Source 패널의 해당 행을 마우스 오른쪽 버튼으로 클릭하고 Add logpoint를 선택합니다.

입력 표시줄에 로그를 입력하면 constore에 예상한 출력을 표시합니다.

Element

Detailed tooltips when inspecting nodes (v73) 비디오

Element 패널에서dom에 대한 자세한 정보를 선택하면 표시됩니다.

AAA contrast ratio line in the Color Picker (v73) 비디오

대비도 확인은 컬러 투수로 할 수 있다.Contrast ratio를 클릭하면 상부의 컬러 투수 안에 선AA이 표시되어 AAA의 색깔을 충족시키는 것을 권장합니다.

자세한 내용은 아래의 내용을 확인하세요.
알기 쉬운 풍격

Highlight all nodes affected by CSS property (v74) 비디오

Element 패널에서 CSS를 편집하려고 하면 해당 스타일이 적용된 요소가 강조 표시됩니다.
아래 그림에서 편집할 테두리p 때문에 화면 안의 요소p의 테두리가 모두 강조 표시됩니다.

Performance

Performance metrics in the Timings section (v72) 비디오

Network 패널의 Timings 영역First Paint과 First Contentful Paint 등의 형식 지표가 표시됩니다.

Long tasks in performance recordings (v74) 비디오

Network 패널의 Timings 섹션에는 레이블Long Task이 추가되었습니다.
임무의 오른쪽 상단에 빨간색 삼각형을 표시하세요.

최후

1년 동안 그 외에도 많은 Update가 있습니다!
에서 Devotol의 업데이트 정보를 총결하였습니다. 마음에 드시는 분들은 체크하세요!