DevTools에 새롭게 추가된 기능에 대한 세션입니다.
- 새로운 기능은 chrome canary 버전에서 chrome://flags 에서 Enable Developer Tools experiments를 활성화해야 사용할 수 있음
- Authoring
- Device mode
- Mobile first를 먼저 하길 권장. 이에 맞춰 개선했음
- responsive design을 쉽게 확인하도록 다양한 사이즈를 쉽게 선택해서 볼 수 있음
- 디바이스 회전 아이콘을 클릭하면 키보드 노출 화면도 확인 가능
- settings - show the device frame 을 선택하면 기기의 프레임을 보여줌.
- 스크린샷 촬영 가능
- 기기를 추가할 수 있고
- device pixel ratio 지정 가능
- network throttling 설정 가능. 네트워크 패널에 있는 것과 동일
- 줌 레벨을 낮추면 4K 모니터에서도 어떻게 보이는지 확인 가능
- 랩탑의 디바이스 타입 설정 가능 (터치 유무)
- show media queries를 선택하면 media query에 지정된 너비를 선택해서 볼 수 있음
- color
- css variable 사용 가능
- 클래스를 설정해서 클래스 선택에 따라 스타일이 달라지는 모습을 확인할 수 있음
- animation
- 새로운 bezier curve editor
- animation inspector
- devtools의 기능을 쉽게 찾고 싶을 때
- sublime text edtor에서 처럼 command + shift + p 를 누르고 키워드를 입력해서 기능을 쉽게 찾을 수 있음
- 새로운 기능
- source diff - element에서 변경하면 소스코드에서 변경된 부분을 표시해줌
- quick source - source와 동일. element에서 style tab에 해당하는 부분을 동시에 보여줌
- css source map을 on 하면 scss 원본 파일과 연결해줌. 이 상태에서 수정해도 반영됨.
- 변수에 지정된 값을 변경 가능
- 저장하면 원본 파일도 같이 변경됨. 파일을 변경해도 스타일 반영됨.
- application
- resources 패널이 변경됨
- manifest를 시각적으로 표현
- service worker 를 다양하게 테스트 가능
- sw에서 생성하는 로그의 색을 변경하는 데모 보여줌
- clear storage
- lighthouse
- progressive web app을 만들기 위한 체크리스트 역할을 하는 프로젝트
- DevTools에 node.js를 디버깅할 수 있는 기능 추가
이 세션의 후반부인 Application 패널부터는 Great libraries and tools for great Progressive Web Apps 의 후반부와 내용이 같습니다. Node.js 프로그램을 DevTools에서 디버깅하는 데모도 동일합니다. 둘 중 하나의 영상만 봐도 충분합니다. 다만 Application 패널에 대한 설명은 service worker pane에 대한 데모가 추가되어 있는 이 동영상이 더 낫습니다. 나머지는 거의 비슷하니 두 개 중 하나만 보셔도 충분할 것입니다.
잘못된 부분이 있을 수 있으니, 꼭 원본 동영상을 참고하시기 바랍니다.