写代码的调试工具和断点调试debugger

我们都知道Vue是一个响应式的，视图驱动数据,数据驱动视图,如何直观的看到Vue组件里面的值呢？

极简插件_Chrome扩展插件商店_优质crx应用下载 (zzzmh.cn)

一.Vue.js devtools

1.可以在上面的极简插件的网址里面进行下载。

2.拖拽

选择管理扩展程序,将下载好的插件拖入进来就可以看见了。

3.调试

(1）数据驱动视图 视图驱动数据

(2)具有父子关系的组件 任然能看到数据

二.debugger调试

  var a = 10;
  function fn() {
    debugger
    setTimeout(() => {
      console.log(123);
    }, 10000);
  }
  console.log(123);

  for(var i=0;i<=5;i++){
    console.log('好好学习');
  }
  fn();

随便写的一行代码，打开浏览器刷新之后,通过debugger断点来判断代码的走向。