DevTools에서 더 스마트한 콘솔 자동 완성으로 입력을 줄이는 방법, 스타일 창에서 직접 @keyframe 규칙을 수정하는 방법, CSS 맞춤 변수를 재미있게 사용하는 방법, 어두운 부분을 조인하는 방법을 알아보세요.
콘솔에서 제공되는 더 스마트한 자동 완성 기능
저를 비롯한 많은 개발자들이 콘솔에 명령어를 입력하여 앱을 디버그하고, 앱이 작동하지 않는 것을 확인하고, 반복하여 반복하여 입력하며, 이 문제를 해결하기 위해 이제 다음과 같이 이전에 입력한 전체 구문이 자동으로 완성됩니다.
스타일 창에서 @keyframe 규칙 직접 수정
Animation Inspector와 이징 편집기를 DevTools에 도입했을 때 전환으로 제한되었습니다. Style 창에 @keyframe 기반 CSS 애니메이션을 표시하지 않았기 때문입니다. 이제 옛말이 된 이야기로 기뻐요. 이제 서두르지 마세요. 동영상 트윗에서 미리보기를 확인하세요.
맞춤 CSS 속성 지원
CSS에는 많은 이점이 있으며 그중 하나는 Chrome 49에서 출시되는 맞춤 변수입니다. 우리는 DevTools에 완벽한 지원을 포함했습니다. 이전에 Sass에서 변수를 사용한 적이 있다면 네이티브 변수를 사용해 보세요. Styles 창에서 속성을 즉시 편집할 수 있고 종속 요소를 즉시 업데이트할 수 있기 때문입니다.
DevTools의 어두운 테마
우리는 마침내 지난 몇 년 동안 수십 번 들은 요청을 받았습니다. 이제 DevTools에서 어두운 면을 선택할 수 있습니다. DevTools 설정으로 이동하여 테마를 어둡게 설정하고 즐겨 보세요. 많은 부분이 자동 생성되므로 아직 베타 버전이므로 개선이 필요한 부분이 있으면 알려주세요.
최고
- 이제 전체 콘솔 탭을 클릭하면 콘솔 창이 자동으로 접힙니다.
- 소스의 파일 트리가 새로운 아이콘과 그룹화 기능으로 정비되었습니다.
언제나 그렇듯이 트위터를 통해 여러분의 생각을 알려주시거나 아래 댓글을 통해 의견을 알려주시고 crbug.com/new에 버그를 제출해 주세요.
다음 달에 또 뵙겠습니다.
폴 바카우스, DevTools팀