Angular 템플릿에서 개체를 디버깅하는 방법(html 파일)

Angular 템플릿에서 개체를 디버깅하는 방법(html 파일)

템플릿을 만들 때 일부 HTML 요소 내에 Angular 코드가 있습니다.

<button id="btnMainMenu" class="button button-icon fa fa-chevron-left header-icon"
        ng-if="(!CoursesVm.showcheckboxes || (CoursesVm.tabSelected == 'current') )"
...

coursVm 객체의 값을 확인하기 위해 ng-if 조건을 디버깅합니다.예를 들어 Chrome에서는 어떻게 해야 하나요?

각도(2+)를 찾는 사용자에게는 json 파이프를 사용합니다.

예:

 <span>{{ CoursesVm | json }}</span> 
 <textarea>{{ CoursesVm | json }}</textarea>

옵션 1: _{^{For Angular2+ and AngularJS}}코드 변경()

_{^{각도 2 이상}}

...컴포넌트에 이 시간함수를 추가합니다.

checkIf(value: any){
    debugger;  //open the devtools and go to the view...code execution will stop here!
    //..code to be checked... `value` can be inspected now along with all of the other component attributes
}

뷰에 추가:*ngIf디버깅할 값을 제공하는 함수가 생성됩니다.

<button *ngIf="checkIf(CoursesVm)">Button</button>

_{^{각도 JS}}

코드를 안에 넣을 수 있습니다.ng-if((!CoursesVm.showcheckboxes || (CoursesVm.tabSelected == 'current') )컨트롤러 기능 내에서 를 디버깅합니다.

다음과 같은 경우:

//...controller
function checkIf(){
    debugger;  //open the devtools and go to the view...code execution will stop here!
    //..code to be checked
} 

<!--view supposing myCtrl is the alias for the controller here-->
<button id="btnMainMenu" class="button button-icon fa fa-chevron-left header-icon"
        ng-if="myCtrl.checkIf()"
<!-- ... -->

옵션 2: Chrome devtools()_{^{For AngularJS (Known to some people as Angular 1)}}에 직접 입력

• 다음과 같이 스코프를 캡처합니다.

  var scope = angular.element(document.getElementById('#btnMainMenu')).scope();

• 다음과 같은 오브젝트에 대한 접근(이 뷰의 컨트롤러가 인 경우):

scope.myCtrl.CoursesVm

템플릿:

<my-a [prop]="log(a)"></my-a>

컨트롤러:

log(o: any) {
 console.log(o);
 return o; 
}

그것은 통나무와 같은 것을 반환하는 파이프로 포장될 수 있다.

<my-a [prop]="a | log"></my-a>

언급URL : https://stackoverflow.com/questions/43126368/how-to-debug-objects-from-angular-template-html-file