태그 보관물: AngularJS

콘솔에서 VUE 객체 사용하기

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

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

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

AngularJS 에서 동적으로 디렉티브 생성

처음부터 생성할 필요가 없는 요소를 나중에 동적으로 생성하기 위한 코드입니다.
페이지 로딩 시에 초기화하는 객체의 수를 줄여서 조금이라도 빠르게 페이지가 실행되도록 하고, 필요할 때 해당 객체를 생성할 수 있습니다.
아래 코드는 브라우저 콘솔에서 실행하기 위한 것으로, 실제 필요한 부분은 마지막 줄입니다.

var $body = angular.element(document.body);
var $scope = $body.scope();
var injector = $body.injector();
var $compile = injector.get("$compile");
 
angular.element("#wrapper").append( $compile("<my-directive></my-directive>")($scope) );

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

콘솔에서 AngularJS의 스코프, 서비스 등 접근하기

다음 코드를 사용하면 콘솔에서 스코프나 서비스를 직접 제어할 수 있습니다.

var scope = angular.element(document.body).scope();
var injector = angular.element(document.body).injector();
var myService = injector.get("MyService");