一，debugger最简单就不说了。

二，时间旅行。

优势：实时编辑数据，修改数据查看影响的效果。可以查看各个阶段的状态值和对应的显示效果。

三，vscode调试

1. 下载插件 Debugger for Chrome。推荐直接在vscode搜索然后安装即可。
2. 配置里面开启source-map(不管是哪个版本哪种配置，看思路不看具体。
3. 工作区保留一个项目，不然有可能会生成到别的项目中去。鼠标选中项目中随便一个文件或文件夹，运行-添加配置-选择Chrome/Firefox：Launch 环境
   然后会生成launch.json文件。
   替换成以下配置。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

注：url的地址端口要和项目对上。
4. 设置断点，鼠标点下左边区域即可。

5. 启动项目服务 yarn serve
6. vscode-运行-启动调试，会自动打开浏览器，然后跳回vscode来。

这样就可以调试vue的项目或者查看源码了。左边和在浏览器上设置断点一样，可以方便的查看到变量的变化和调用的堆栈等信息。
优点：信息显示更全，阅读体验更好。

一般快捷键

F10：不想进入函数则跳过
F11：想看下函数里面是什么则进入
shift+F11：跳出函数
shift+ f5：断开
ctrl+shift+f5：重启

参考：官网地址