How to log Vue's computed properties or methods?

Question

I can't get logs from computed props or methods in Vue. This makes debugging a pain. I know computed properties are cached, but methods are not, and for example, this won't log anything anytime, BUT in fact it will update the properties. So why not logs???

,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(', ');
  }
}

Later in the html code I'm of course calling them {{ point_dimensions() }} and the like, and output is ok, but I have no logs.

Answer 1

you can use the built-in debugger in your browser or use

  debugger //make sure you have the devtool opened

instead of

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