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