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