애플리케이션 구조를 검사하고 성능을 프로파일 링하는 데 사용할 수있는 Chrome DevTools 확장 프로그램 인 Angular DevTools를 발표하게되어 기쁩니다.

아래 동영상에서 Angular DevTools에 대해 자세히 알아볼 수 있으며 Chrome 웹 스토어 에서 설치할 수 있습니다 .

더 나은 Angular 디버깅 경험

Google 내부에서 설문 조사를 실행하여 외부 개발자로부터 얻은 관찰 결과를 확인했습니다. 대부분의 사람들은 앱을 디버깅하기 위해 더 나은 도구가 필요합니다.

외부 및 내부 연구에서 얻은 결과를 기반으로 가장주의가 필요한 다음 영역을 식별했습니다.

• 오류 메시지 개선
• 변경 감지 실행 이해
• 주입기 계층 구조 및 공급자 인스턴스화 이해
• 구성 요소 구조 시각화

Angular DevTools의 기능

나머지 문제를 해결하고 Chrome DevTools 기능을 기반으로하는 Angular 별보기를 제공하기 위해 Rangle.io 와 공동으로 Angular DevTools를 개발 했습니다 . Rangle의 팀은 Angular — Augury를 위한 최초의 디버깅 도구를 구축 했으며 수년간 커뮤니티에 봉사했습니다. 우리는 함께 일하면서 Augury에서 배운 교훈을 재사용하여 Angular DevTools를 처음부터 개발했습니다.

현재 릴리스에서 Angular DevTools는 다음에 중점을 둡니다.

• 구성 요소 구조의 시각화
• 변경 감지 실행 이해

또한 변경 감지주기에 대한 개요를 제공하여 성능 병목 현상을 찾는 데 도움이되므로 사용자에게 60fps 경험을 제공 할 수 있습니다.

Angular DevTools는 Ivy가 활성화 된 Angular v9 이상으로 구축 된 애플리케이션을 지원합니다.

완벽한 개발 툴체인

Angular에서 우리는 현대 웹 개발자를위한 완전한 툴체인을 제공하기 위해 열심히 노력해 왔습니다. Angular CLI, 언어 서비스, PWA 도구 및 구성 요소와 함께 Angular DevTools는 애플리케이션의 구조 및 런타임 성능을 더 잘 이해하는 데 도움이되는 중요한 누락 부분을 제공합니다.

Angular DevTools의 향후 릴리스에서는 요청에 따라 가장 영향력있는 기능을 고려하여 Augury로 기능 격차를 메우기 위해 노력할 것입니다. 이 작업을 여러분과 공유하게되어 기쁩니다! 개발 프로세스에 더 높은 수준의 신뢰와 투명성을 제공하기를 바랍니다.

DevTools에서 Angular 팀과 함께 작업 한 Aleksander Bodurri 와 Sumit Arora 에게 특별히 감사드립니다 .