Angular DevTools는 Angular 애플리케이션의 디버깅과 프로파일링 기능을 제공하는 브라우저 확장 프로그램입니다.
Chrome 웹 스토어나 Firefox 부가 기능에서 Angular DevTools를 설치하세요.
웹페이지에서 Windows나 Linux는 F12 또는 Ctrl+Shift+I를 누르고, Mac은 Fn+F12 또는 Cmd+Option+I를 누르면 Chrome이나 Firefox DevTools를 열 수 있습니다. Angular DevTools가 설치되어 있으면 브라우저 DevTools의 "Angular" 탭에서 사용할 수 있습니다.
도움말: Chrome의 새 탭 페이지에서는 설치된 확장 프로그램이 실행되지 않으므로 DevTools에 Angular 탭이 표시되지 않습니다. 다른 페이지를 방문하면 확인할 수 있습니다.
애플리케이션 열기
확장 프로그램을 열면 다음 네 개의 탭이 표시됩니다:
| 탭 | 설명 |
|---|---|
| Components | 애플리케이션의 컴포넌트와 디렉티브를 살펴보고 상태를 미리 보거나 수정할 수 있습니다. |
| Profiler | 애플리케이션을 프로파일링하고 변경 감지 실행 중 성능 병목이 발생하는 지점을 파악할 수 있습니다. |
| Injector Tree | 환경 인젝터와 엘리먼트 인젝터의 계층을 시각적으로 확인할 수 있습니다. |
| Router Tree | 애플리케이션의 라우팅 트리를 시각적으로 확인할 수 있습니다. |
Transfer State 등의 다른 탭은 실험 단계이며, DevTools 설정에서 활성화할 수 있지만 아직 문서화되지 않았습니다.
도움말: Chromium 기반 브라우저 사용자라면 Performance 패널 통합 기능도 참고해 보세요.
Angular DevTools 오른쪽 위에 있는 정보 버튼을 누르면 팝오버가 열립니다. 정보 팝오버에서는 페이지에서 실행 중인 Angular 버전과 DevTools 버전 등 여러 정보를 확인할 수 있습니다.
Angular 애플리케이션을 감지하지 못한 경우
Angular DevTools를 열 때 "Angular application not detected" 오류 메시지가 표시되면 페이지의 Angular 앱과 통신할 수 없다는 의미입니다. 검사 중인 웹페이지에 Angular 애플리케이션이 없는 경우가 가장 흔한 원인입니다. 올바른 웹페이지를 검사하고 있는지, Angular 앱이 실행 중인지 다시 확인하세요.
프로덕션 설정으로 빌드된 애플리케이션을 감지한 경우
"We detected an application built with production configuration. Angular DevTools only supports development builds." 오류 메시지가 표시되면 페이지에서 Angular 애플리케이션을 찾았지만 프로덕션 최적화를 적용해서 컴파일했다는 의미입니다. Angular CLI는 프로덕션용으로 컴파일할 때 페이지의 JavaScript 크기를 줄여 성능을 개선하기 위해 여러 디버깅 기능을 제거합니다. 여기에는 DevTools와 통신하는 데 필요한 기능도 포함됩니다.
DevTools를 실행하려면 최적화를 비활성화한 상태로 애플리케이션을 컴파일해야 합니다.
ng serve는 기본적으로 이렇게 동작합니다.
배포된 애플리케이션을 디버깅해야 한다면 optimization 설정 옵션으로 빌드 최적화를 비활성화하세요({"optimization": false}).