브라우저에서 angularjs의 $rootScope 개체를 디버깅하는 방법
angularjs 어플리케이션이 브라우저에 로드되었을 때 디버깅하는 방법이 있습니까?
즉, 이 제품을 구입하고 싶다.$rootScope현재 어플리케이션에서 사용하고 있습니다.내가 그걸 어떻게 하겠어?
+1(Batarang의 경우)
또한 콘솔에서 다음을 실행하여 DOM 내의 모든 요소에서 스코프를 가져올 수 있습니다.
angular.element(DOMNODE).scope()
여기서 DOMNODE는 물론 DOM 노드에 대한 참조입니다.
예를 들어 요소 탭의 Chrome에서 다음과 같은 노드를 선택할 수 있습니다.ng-appdirective는 다음과 같이 루트 스코프를 가져옵니다.
angular.element($0).scope()
개발자 콘솔에서 다음을 수행합니다.
$rootScope = angular.element(document).scope()
Batarang - 각도용 Google Chrome 플러그인JS
설치 후 다음 작업을 수행할 수 있습니다.
console.log($rootScope);
크롬 콘솔에서 스코프 개체를 확인합니다.
참고로 $rootScope를 가져오려면 컨트롤러에 삽입해야 합니다.
맘에 들다
app.controller('MainCtrl', function($scope, $rootScope) {
}
개발자 콘솔 유형angular.element('body').scope();어플리케이션의 경우<body data-ng-app="SomeApp">
사용하시는 분$compileProvider.debugInfoEnabled(false);그리고.ng-strict-di콘솔에 붙여넣기만 하면 됩니다.$rootScope로그에 기록되어 에 추가됩니다.window:
function getRootScope($rootScope){ console.log(window.$rootScope = $rootScope); }
getRootScope.$inject = ["$rootScope"];
angular.element(document.querySelector('[data-ng-app],[ng-app]')).injector().invoke(getRootScope);
$rootScope는 소스 Developer Tools -> Sources에서 확인할 수 있습니다.
개발자 도구 요소 탭에서 선택한 요소의 범위를 자동으로 검사하는 "Angular Scope Inspector"(현재 스토어 URL)라는 무료 Chrome Extension이 있음을 추가하고자 합니다.
오늘 막 발견했는데 아주 유용해, IMO
언급URL : https://stackoverflow.com/questions/13170732/how-to-debug-the-rootscope-object-of-angularjs-in-the-browser
'programing' 카테고리의 다른 글
| WP Rest API 업로드 이미지 (0) | 2023.02.10 |
|---|---|
| React ref.current 값이 변경되었는지 어떻게 알 수 있습니까? (0) | 2023.02.10 |
| JSON 경유 HTML 코드 전송 (0) | 2023.02.10 |
| Angular js - ng-repeat이 비어 있는 경우 메시지 표시 (0) | 2023.02.10 |
| 한 두 필드만 빼고 다 선택할 수 있어요? 작가 경련 없이? (0) | 2023.02.10 |