> 웹 프론트엔드 > JS 튜토리얼 > Angular Augury를 사용하여 코드를 디버깅합니다

Angular Augury를 사용하여 코드를 디버깅합니다

Lisa Kudrow
풀어 주다: 2025-02-15 12:24:12
원래의
738명이 탐색했습니다.
Augury : 강력한 각도 응용 분해 도구 Augury는 Angular 2 응용 프로그램을 디버깅하고 분석하도록 설계된 오픈 소스 도구입니다. 직관적으로 애플리케이션 아키텍처를 트리 구조로 제시하여 개발자가 객체 속성을 쉽게 확인하고 실시간으로 수정하고 소스 코드보기, 중단 점 설정, 이벤트 처리 등을 쉽게 확인할 수 있습니다.

Augury의 핵심 장점 :

오픈 소스 및 사용하기 쉬운 : Using Angular Augury to Debug Your Code 크롬 브라우저 확장으로 Augury는 설치하기 쉽고 시간이 많이 걸리는 학습이 필요하지 않습니다.

직관적 인 시각화 : 응용 프로그램 아키텍처에 대한 이해를 용이하게하기 위해 트리 구조에 구성 요소와 종속성을 표시합니다. 실시간 디버깅 :

는 실시간 점검 및 객체 속성을 실시간으로 수정하고 즉시 변경 사항을 관찰 할 수 있습니다.
    강력한 디버깅 기능 :
  • 는 소스 코드보기, 중단 점 설정 및 처리 이벤트와 같은 고급 디버깅 기능을 지원합니다. 종속성 주입 다이어그램 : 문제 해결 종속성 주입 문제를 용이하게하기 위해 구성 요소 간의 종속성을 명확하게 표시합니다.
  • 라우팅 시스템 시각화 :
  • 라우팅 시스템 시각화 : 응용 프로그램의 라우팅 구조를 직관적으로 표시하며, 이는 라우팅 관련 문제를 디버깅하는 데 편리합니다. Augury 사용자 안내서 :
  • Augury 설치 : Chrome 웹 스토어에서 Augury Extension을 설치하십시오. 개발자 도구를 시작하십시오 :
  • (wind Augury 패널로 전환 : 개발자 도구에서 "Augury"탭을 찾아 전환하십시오.
  • 구성 요소 트리 찾아보기 :
  • 구성 요소 트리의 대상 구성 요소를 선택하면 오른쪽 패널에 구성 요소의 속성, 종속성 및 기타 정보가 표시됩니다. 중단 점 설정 : 프로그램이 더 깊은 디버깅을 위해 특정 위치로 실행될 때 소스 코드 패널에서 중단 점을 설정하십시오.
  • 종속성 주입 점검 :
  • "인젝터 그래프"기능을 사용하여 구성 요소의 종속성 주입 관계를 확인하십시오. 라우팅보기 : "경로"함수를 사용하여 응용 프로그램의 라우팅 구성을보십시오.

샘플 애플리케이션 : Augury의 기능을 더 잘 이해하기 위해 Augury의 다양한 기능을 보여주기 위해 간단한 각도 적용이 기사에 내장되어 있습니다. 앱에는 일부 사용자가 나열되어 있으며 사용자가 사용자 정보를 편집 할 수 있습니다. Augury의 주요 기능 모듈 :

위 내용은 Angular Augury를 사용하여 코드를 디버깅합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿