Angular4组件如何在浏览器控制台查看变量值（无需console.log）

当然有办法！不用console.log也能轻松查看Angular 4组件里的变量值，针对你的LoginComponent，我给你两种实用的调试方法：

方法一：使用Angular内置调试工具ng.probe #

这是Angular专为调试提供的API，能直接获取组件实例，步骤很简单：

• 打开浏览器的**元素(Elements)**面板，找到属于LoginComponent的任意DOM元素（比如组件模板渲染出的输入框、按钮或容器div），点击选中它。此时控制台里的$0变量就代表这个选中的DOM元素。
• 切换到**控制台(Console)**面板，输入命令：

  const loginComp = ng.probe($0).componentInstance;
  

• 现在直接输入loginComp.data，就能看到你的this.data的值——也就是"Hello"了！

方法二：将组件实例挂载到全局window对象 #

如果觉得每次选DOM麻烦，可以把组件实例暴露到全局作用域：

• 修改你的LoginComponent代码，在构造函数或ngOnInit里添加一行：

  export class LoginComponent implements OnInit {
    data : any;
    constructor() {
      this.data = "Hello";
      // 把组件实例挂载到window，方便控制台访问
      window['loginComponent'] = this;
    }
    ngOnInit() {}
  }
  

• 刷新页面后，直接在控制台输入loginComponent.data，就能直接获取变量值。

提醒：这种方法仅适合开发调试，上线前一定要删掉这行代码，避免全局变量污染和潜在安全问题。

内容的提问来源于stack exchange，提问作者yozawiratama