태그 보관물: Custom Javascript for websites

콘솔에서 VUE 객체 사용하기

전에 콘솔에서 AngularJs의 스코프에 접근하기 위한 코드를 올렸는데, 이번에는 VUE에서 내부 객체에 접근하기 위한 방법입니다.
다음과 같이 __vue__ 를 참조하여 VUE 객체에 접근이 가능합니다.

var myVue1 = document.getElementById("myVueId").__vue__
var myVue2 = document.getElementsByClassName("myVueClass")[0].__vue__;

아래 포스트와 같이 Custom JavaScript를 사용하면 더욱 쉽게 디버깅 할 수 있습니다.
크롬에서 cjs로 AngularJS 디버깅하기

크롬에서 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);