programing

브라우저에서 각도 서비스를 디버깅하는 방법

sourcejob 2023. 3. 15. 19:33
반응형

브라우저에서 각도 서비스를 디버깅하는 방법

각진 앱으로 공장/서비스를 만들었습니다.

브라우저에서 디버깅하고 싶습니다.해당 인스턴스에 액세스하여 해당 함수 및 변수의 값을 확인할 수 있는 방법이 있습니까?

각도 스코프는 다음을 사용하여 액세스할 수 있습니다.

angular.element(e).scope()

공장에 접근할 수 있는 비슷한 방법이 있나요?

다음과 같은 것을 사용할 수 있습니다.

angular.element(e).injector().get('serviceName')

또한 angularjs 서비스는 싱글톤이므로 angular.element에서 이 작업을 수행하면 항상 동일한 서비스 인스턴스/오브젝트가 반환됩니다.

서비스를 임의의 컨트롤러에 삽입하여console.log(myService);

만지작거리다.

@bmleite에서 설명한 바와 같이 다음을 사용할 수 있습니다.

angular.element( {DOM element} ).injector().get('serviceName')

원하는 DOM 요소를 선택한 다음(Chrome Developper Tools의 'Elements' 탭 또는 Firefox/Firebug의 'HTML' 탭 사용) $0을 사용하여 'Console' 탭에서 가리킬 수 있습니다.

가장 간단하게 선택할 수 있는 요소는 ngApp 지시문이 있는 요소입니다.마지막 코드는 다음과 같습니다.

var myService = angular.element($0).injector().get('serviceName');

그러면 모든 변수와 함수에 액세스할 수 있습니다.

myService.getConfig('dev');

ng-inspect chrome 확장을 시도합니다.

콘솔의 $get('serviceName')은 서비스 또는 공장 인스턴스를 반환합니다.

서비스를 어떻게 검사하는지는 확실하지 않지만, Angular Batarang은 Angular 앱을 디버깅하기 위한 훌륭한 Chrome 확장판입니다.도움이 될 것 같아요.

https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk

Batarang에 유용한 문서:

http://www.c-sharpcorner.com/UploadFile/9c2805/getting-started-with-angularjs-batarang/

언급URL : https://stackoverflow.com/questions/14278355/how-to-debug-angular-services-in-browser

반응형