Javascript 如何从角度模板（html文件）调试对象

创建模板时，我在一些HTML元素中有一些角度代码：

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

---

选项1:修改您的代码（对于Angular2+和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>

选项2:直接在chrome开发工具中（用于AngularJS（有些人称之为Angular1））


像这样捕获范围：

//...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()"
<!-- ... -->

var scope=angular.element（document.getElementById（'#btnMainMenu'））.scope（）


像这样访问对象（假设此视图的控制器是
myCtrl）：



scope.myCtrl.CoursesVm
对于寻找Angular（2+）的人，请使用json管道

例如：

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

{{CoursesVm|json}
{{CoursesVm | json}}
由于不太清楚如何在Chrome本身中执行代码，第二个选项对我很有用。非常感谢much@Chicowitz，在呈现html后直接在开发工具中调试的不便之处在于，值显示为所有变量的最终求值，而使用第二个选项，您可以看到变量在控制器中执行时获得（并正在修改）值。第一个用于评估您希望在页面呈现后看到其最终结果的值，第二个用于查看变量值从一个值更改为另一个值时的所有过程。Lol，澄清一下，因为我无法编辑我的注释：第二个选项已被编辑，成为此页面中的第一个选项answer@Chicowitz是的，的确如此。我忘了您添加了一条注释，指定了适合您的选项。我编辑了这篇文章，因为Angular+2现在使用得更广泛了。你可以随时删除旧评论并发布新评论：）谢谢你指出这一点。我使用{{CoursesVm | json}}/你在找这样的东西吗。。。