크롬에서 cjs로 AngularJS 디버깅하기

AngularJS는 변수나 함수들이 외부로 노출되지 않아 디버깅 하기 어려운 점이 있죠.
그래서 이것저것 시험해 보다 찾아낸 크롬 브라우저의 확장 프로그램 Custom JavaScript for websites을 사용하면 매우 편합니다.

Custom JavaScript for websites (크롬 웹스토어)

사용법은 간단합니다. 적용할 사이트로 이동해서 cjs를 실행하면 다음과 같은 화면이 나오는데, 여기에 원하는 코드를 입력하고 저장해 주세요. 그러면 해당 사이트의 페이지를 열 때마다 입력한 스크립트가 자동으로 실행됩니다.

cjs

여기에 콘솔에서 AngularJS의 스코프, 서비스 등 접근하기 글에서 사용한 코드를 입력하면, 브라우저의 콘솔에서 $scope.myProperty 라던가 $scope.myFunction() 같이 스코프나 서비스 객체에 접근이 가능합니다.

코드 복사해서 사용할 수 있도록 추가해 놓아요.

1
2
3
4
5
6
7
8
9
10
11
12
13
function angularScope(){
    try{
        $scope = angular.element(document.body).scope();
        injector = angular.element(document.body).injector();
        $window = injector.get("$window");
        $timeout = injector.get("$timeout");
        $http = injector.get("$http");
        $location = injector.get("$location");
        myService = injector.get("myService");
    }catch(e){}
}
 
setTimeout(angularScope, 1000);

3 thoughts on “크롬에서 cjs로 AngularJS 디버깅하기”

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다