Angular의 브라우저 플러그인 Batarang 사용에 대한 자세한 설명

이번에는 Angular의 브라우저 플러그인 Batarang 사용에 대한 자세한 설명을 가져왔습니다. Angular의 브라우저 플러그인 Batarang을 사용할 때 주의사항은 무엇인가요?

Angular 브라우저 플러그인 Batarang 소개

Angular를 처음 접하는 사람들에게는 처음 Angular를 인수할 때 상당히 고통스러울 것입니다. 실제로 JQuery, Backbone 등에 비해 Angular는 상대적으로 임계값이 높고 디버그하기가 더 어렵습니다. 오늘은 Angular를 가지고 왔습니다. Chrome 플러그인 Batarang에 대한 소개는 플러그인을 사용하면 Angular에 대한 이해를 높이는 데 도움이 됩니다.

준비

배타랑 설치:

1. 방법 1: Chrome App Store에서 Batarang을 찾아 설치하세요.

2. 방법 2: 온라인에서 Batarang 설치 패키지를 찾아 Chrome 브라우저에 직접 설치합니다.

사용

Batarang 플러그인이 설치된 브라우저에서 Angular 애플리케이션을 열고 아래와 같이 콘솔을 엽니다.

콘솔에 추가 AngularJS 페이지가 있음을 확인할 수 있습니다. "활성화"를 선택하면 control을 사용할 수 있습니다.

모델

모델을 클릭하면 왼쪽에는 해당 애플리케이션의 모든 Scope에 대한 정보가 표시되고, 오른쪽에는 해당 Scope에 해당하는 모델 정보가 표시됩니다. 범위를 클릭하면 범위 내의 모든 모델 정보가 오른쪽에 표시됩니다.

Scope 앞의 "<"를 클릭하면 Elements에 있는 DOM 태그로 이동합니다.

성능

Performace는 애플리케이션의 성능을 보여주고, 오른쪽은 모니터링 표현의 성능을 보여줍니다. 이 페이지는 성능 최적화를 수행하는 데 도움이 될 수 있습니다.

종속

종속성은 명령과 서비스 간의 종속성을 표시합니다. 명령을 선택하면 해당 명령이 의존하는 서비스를 볼 수 있습니다.

옵션

마지막으로 옵션 페이지입니다. "응용 프로그램 표시", "범위 표시" 및 "바인딩 표시"의 세 가지 옵션이 있습니다. 각 옵션을 선택하면 디버거 중에 해당 내용이 페이지에서 강조 표시됩니다

도움말

궁금하신 점은 도움말을 확인해주세요

요소

사실 제가 가장 많이 사용하는 것은 Element 오른쪽에 있는 AngularJS입니다. 속성 탭. Element 태그에서 태그를 선택하면 Element 페이지 오른쪽의 콘텐츠에 추가 AngularJS가 포함됩니다. 선택한 HTML 콘텐츠 범위의 속성을 표시하는 속성 페이지. 이 기능은 Angular에 유용합니다. 범위를 이해하는 것은 매우 유용합니다. Angular Scope를 잘 이해하지 못한다면 이 기능을 더 활용해도 됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

nodejs가 redis를 사용하여 캐시를 캡슐화하는 방법

사용자 정의된 ajax 도메인 간 구성 요소 캡슐화

express+multer 노드 이미지 업로드를 구현하는 특정 단계

위 내용은 Angular의 브라우저 플러그인 Batarang 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!