如何记录 Vue 的计算属性或方法？答案

【问题标题】：How to log Vue's computed properties or methods?如何记录 Vue 的计算属性或方法？
【发布时间】：2019-01-27 10:59:39
【问题描述】：

我无法从 Vue 中的计算道具或方法中获取日志。这使得调试很痛苦。我知道计算的属性被缓存了，但是方法没有被缓存，例如，这不会随时记录任何东西，但实际上它会更新属性。那么为什么不记录呢？？？

,methods:{
  ,screw_dimensions: function(){
    console.log('test'); // TEST LOG

    var list = _.compact(_.map(this.screw_metrics_codes, function(code){
      var v = this.form.screw['metrics_' + code];
      console.log('test2'); // TEST LOG
      if(v && v.trim() != '') return code + '=' + v;
    }.bind(this)));

    if(list.length == 0) return '';
    return list.join(', ');
  }

  ,point_dimensions: function(){

    console.log('test'); // TEST LOG

    var list = _.compact(_.map(this.point_metrics_codes, function(code){
      var v = this.form.point['metrics_' + code];
      if(v && v.trim() != '') return code + '=' + v;
    }.bind(this)));

    if(list.length == 0) return '';
    return list.join(', ');
  }
}

后面的html代码我当然叫他们{{ point_dimensions() }}之类的，输出没问题，但是我没有日志。

【问题讨论】：

我们是在讨论浏览器开发工具中的日志吗？如果是这样，请确保在控制台窗格中没有过滤掉“信息”日志级别消息。
请给出一个reprex（在github中准备可重现的示例代码）

标签： javascript vue.js

【解决方案1】：

您可以使用浏览器中的内置调试器或使用

  debugger //make sure you have the devtool opened

而不是

  console.log('test'); // TEST LOG

【讨论】：