Angular JavaScript를 사용하여 개념 증명 작업 중입니다.

다른 브라우저 (Firefox 및 Chrome)에서 Angular JavaScript 코드를 디버깅하는 방법은 무엇입니까?

1. 크롬

크롬 에서 AngularJS 디버그의 경우 AngularJS Batarang을 사용할 수 있습니다 . (플러그인에 대한 최근 리뷰에서 AngularJS Batarang이 더 이상 유지되지 않는 것 같습니다. 다양한 버전의 크롬에서 테스트는 작동하지 않습니다)

설명 및 데모 링크는 다음과 같습니다.

Angular JS Batarang 소개

여기에서 크롬 플러그인 다운로드 : AngularJS 디버그 용 크롬 플러그인

이 링크를 참조 할 수도 있습니다 : ng-book : Debugging AngularJS

ng-inspect를 사용하여 각도를 디버깅 할 수도 있습니다.

2. Firefox

들어 파이어 폭스 의 도움으로 방화범 당신은 코드를 디버깅 할 수 있습니다.

이 Firefox 추가 기능도 사용하십시오. AngScope : Firefox 용 추가 기능 (AngularJS 팀의 공식 확장이 아님)

3. AngularJS 디버깅 : 링크 확인 : AngularJS 디버깅

IMHO, 가장 실망스러운 경험은 시각적 요소와 관련된 특정 범위의 값을 얻거나 설정하는 것입니다. 내 코드뿐만 아니라 angular.js 자체에서도 많은 중단 점을 수행했지만 때로는 가장 효과적인 방법이 아닙니다. 아래 방법은 매우 강력하지만 실제로 프로덕션 코드에서 사용하는 경우에는 확실히 나쁜 습관으로 간주되므로 현명하게 사용하십시오!

시각적 요소에서 콘솔에서 참조 가져 오기

대부분의 비 IE 브라우저에서는 요소를 마우스 오른쪽 단추로 클릭하고 "요소 검사"를 클릭하여 요소를 선택할 수 있습니다. 또는 예를 들어 Chrome의 요소 탭에서 요소를 클릭 할 수도 있습니다. 가장 최근에 선택한 요소는 $0콘솔의 변수 에 저장 됩니다.

요소에 연결된 범위 가져 오기

격리 범위를 만드는 지시문이 있는지 여부에 따라 angular.element($0).scope()또는 angular.element($0).isolateScope()( $($0).scope()$가 활성화 된 경우 사용)로 범위를 검색 할 수 있습니다 . 이것은 Batarang의 최신 버전을 사용할 때 정확히 얻는 것입니다. 값을 직접 변경하는 경우를 사용 scope.$digest()하여 UI에 변경 사항을 반영해야합니다.

$ eval은 악

디버깅을 위해 반드시 필요한 것은 아닙니다. scope.$eval(expression)표현식에 예상 값이 있는지 신속하게 확인하려는 경우 매우 편리합니다.

범위의 누락 된 프로토 타입 구성원

전자 scope.bla와 의 차이 scope.$eval('bla')는 프로토 타입 적으로 상속 된 값을 고려하지 않습니다. 아래 스 니펫을 사용하여 전체 그림을 얻으십시오 (값을 직접 변경할 수는 없지만 $eval어쨌든 사용할 수 있습니다 !).

scopeCopy = function (scope) {
    var a = {}; 
    for (x in scope){ 
        if (scope.hasOwnProperty(x) && 
            x.substring(0,1) !== '$' && 
            x !== 'this') {
            a[x] = angular.copy(scope[x])
        }
    }
    return a
};

scopeEval = function (scope) {
    if (scope.$parent === null) {
        return hoho(scope)
    } else {
        return angular.extend({}, haha(scope.$parent), hoho(scope))
    }
};

와 함께 사용하십시오 scopeEval($($0).scope()).

내 컨트롤러는 어디에 있습니까?

ngModel지시문을 작성할 때 값을 모니터하고 싶을 때가 있습니다 . 사용 $($0).controller('ngModel')당신은 확인 얻을 것이다 $formatters, $parsers, $modelValue, $viewValue $render모든 것을.

사용할 수있는 $ log도 있습니다! 그것은 당신이 원하는 방식으로 콘솔을 사용합니다!

콘솔에 정상적으로 표시되는 방식으로 오류 / 경고 / 정보 표시!

이것을 사용하십시오> 문서

질문에 대한 답변에도 불구하고 ng-inspector를 살펴 보는 것은 흥미로울 수 있습니다.

ng-inspector를 사용해보십시오. http://ng-inspector.org/ 웹 사이트에서 Firefox 용 애드온을 다운로드합니다 . Firefox 추가 메뉴에서는 사용할 수 없습니다.

http://ng-inspector.org/- 웹 사이트

http://ng-inspector.org/ng-inspector.xpi-Firefox 부가 기능

불행히도 대부분의 추가 기능 및 브라우저 확장은 값을 표시하지만 범위 변수를 편집하거나 각도 함수를 실행할 수 없습니다. 브라우저 콘솔 (모든 브라우저에서)에서 $ scope 변수를 변경하려면 jquery를 사용할 수 있습니다. AngularJS 전에 jQuery를로드하면 angular.element에 jQuery 선택기를 전달할 수 있습니다. 따라서 컨트롤러의 범위를 검사 할 수 있습니다.

angular.element('[ng-controller="name of your controller"]').scope()

예 : $ scope 변수의 값을 변경하고 브라우저에서 결과를 확인한 다음 브라우저 콘솔에 입력하면됩니다.

angular.element('[ng-controller="mycontroller"]').scope().var1 = "New Value";
angular.element('[ng-controller="mycontroller"]').scope().$apply();

브라우저에서 즉시 변경 사항을 볼 수 있습니다. 우리가 $ apply ()를 사용한 이유는 외부 앵귤러 컨텍스트에서 업데이트 된 모든 범위 변수가 바인딩을 업데이트하지 않기 때문 scope.$apply()입니다.를 사용하여 범위 값을 업데이트 한 후 다이제스트주기를 실행해야합니다 .

$ scope 변수 값을 관찰하려면 해당 변수를 호출하기 만하면됩니다.

예 : Chrome 또는 Firefox의 웹 콘솔에서 $ scope.var1 값을 보려면 다음을 입력하십시오.

angular.element('[ng-controller="mycontroller"]').scope().var1;

결과는 콘솔에 즉시 표시됩니다.

debugger사용하려는 위치에 통화를 추가 하십시오.

someFunction(){
  debugger;
}

에서 console브라우저의 웹 개발자 도구 탭 문제angular.reloadWithDebugInfo();

디버깅하려는 페이지를 방문하거나 새로 고침하면 브라우저에 디버거가 표시됩니다.

var rootEle = document.querySelector("html");
var ele = angular.element(rootEle); 

scope () 요소에 scope () 메소드를 사용하여 요소 (또는 부모)에서 $ scope를 가져올 수 있습니다.

var scope = ele.scope();

주사기()

var injector = ele.injector();

이 인젝터를 사용하면 서비스, 기타 컨트롤러 또는 기타 객체와 같은 앱 내부의 Angular 객체를 인스턴스화 할 수 있습니다.

코드에 '디버거'를 추가하고 앱을 다시로드하면 여기에 중단 점이 배치되고 '스텝 ​​오버'하거나 실행할 수 있습니다.

var service = {
user_id: null,
getCurrentUser: function() {
  debugger; // Set the debugger inside 
            // this function
  return service.user_id;
}

개발자 도구에 내장 된 브라우저를 사용하여 디버깅 할 수 있습니다.

1. 브라우저에서 개발자 도구를 열고 소스 탭으로 이동합니다.

2. Ctrl + P를 사용하여 디버그 할 파일을 열고 파일 이름을 검색하십시오.

3. 코드의 왼쪽을 클릭하여 줄에 중단 점을 추가합니다.

4. 페이지를 새로 고칩니다.

디버깅에 사용할 수있는 플러그인이 많이 있습니다. chrome 플러그인 사용을 위해 참조 할 수 있습니다. "Debugger for chrome"플러그인을 사용하여 Angular 애플리케이션 디버그

Visual Studio Code (Visual Studio 아님)의 경우 Ctrl+ Shift+P

검색 창에 Debugger for Chrome을 입력하고 설치하고 활성화합니다.

당신에 launch.json파일이 설정을 추가 :

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/mypage.html",
            "webRoot": "${workspaceRoot}/app/files",
            "sourceMaps": true
        },
        {
            "name": "Launch index.html (without sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceRoot}/index.html"
        },
    ]
}

확장 프로그램을 연결하려면 원격 디버깅이 활성화 된 상태에서 Chrome을 실행해야합니다.

• 윈도우

Chrome 바로 가기를 마우스 오른쪽 버튼으로 클릭하고 속성을 선택합니다. "target"필드에서 --remote-debugging-port = 9222를 추가하거나 명령 프롬프트에서 /chrome.exe를 실행합니다. --remote-debugging-port = 9222

• OS X

터미널에서 / Applications / Google \ Chrome.app/Contents/MacOS/Google \ Chrome --remote-debugging-port = 9222를 실행합니다.

• 리눅스

터미널에서 google-chrome --remote-debugging-port = 9222를 시작합니다.

더 찾기 ===>

추가 기능이 더 이상 작동하지 않기 때문에 내가 찾은 가장 유용한 도구 세트는 Visual Studio / IE를 사용하는 것입니다. JS에서 중단 점을 설정하고 그런 방식으로 데이터를 검사 할 수 있기 때문입니다. 물론 Chrome과 Firefox에는 일반적으로 훨씬 더 나은 개발 도구가 있습니다. 또한 좋은 console.log ()는 매우 유용했습니다!

Angular 2 이상 애플리케이션을 디버깅 하기 위해 Angular Augury A Google Chrome Dev Tools 확장 프로그램을 사용할 수 있습니다 .