一,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:重启


参考:官网地址

Logo

前往低代码交流专区

更多推荐