【保姆级教程】Vue项目调试技巧

2023/6/20 14:22:30

本文主要是介绍【保姆级教程】Vue项目调试技巧,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

前言

Vue项目开发过程中,当遇到应用逻辑出现错误,但又无法准确定位的时候,知晓Vue项目调试技巧至关重要,debug是必备技能。

同后台项目开发一样,可以在JS实现的应用逻辑中设置断点,并进行单步、进入方法内、跳出方法等调试,从而准确定位问题根源。

本文主要讲解针对Vue项目进行调试的 3 种方法:debuggerVue.js devtools、vs code插件。

调试方法

1、debugger

debugger是浏览器提供的调试语句,其主要是通过停止JS的执行,相当于设置断点。它的使用方法很简单, 只需要在我们的JS语句中, 插入一行debugger; 即可。

JS代码编写的过程中,我们都会通过浏览器的调试模式(F12)来检查代码逻辑是否正确,大多数我们都是通过设置断点来进行调试。

应用debugger调试Vue项目,需要在项目中需要的位置写debugger,项目运行后,打开浏览器按F12,在chrome sources页签中就会直接进入断点,至此就可以可以进行单步、跳步调试。

debugger调试

2、Vue.js devtools

该调试工具为针对 Chrome 浏览器而设计的开源调试工具,可以自行将该项目下载下来然后编译,并将生成后的chrome插件安装至chrome中,步骤如下:找到谷歌浏览器的扩展程序功能,勾选开发者模式,然后我们将插件文件夹里的shells>chorme文件夹直接拖到页面中,完成安装。也可以通过流程扩展直接安装,如下图所示。

Vue-devtools

然后运行本地项目用谷歌浏览器打开就可以调试了,如下图所示。

vue

我们通过vue.js devtools配合在浏览器中展示源代码(Sources标签页)打断点,来调试非常也是非常方便,如下图所示。这是我用的比较多的调试方法。这种方法是基于 source-map 的,依赖于浏览器中和源码的一个映射,通过映射来找到源文件

vue.js devtools配合在浏览器中展示源代码

上面的方式要使用需要在前端项目的vue.config.js添加如下内容即可。

vue.config.js添加source-map

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

参考:在浏览器中展示源代码

3、vs code 插件 Debugger for Chrome

这种方式打断点最方便,但是不能配合vue.js devtools

在vs code中下载插件:Debugger for Chrome

Debugger for Chrome插件

安装插件后,在vs左侧会出现一个蜘蛛图标,如下图所示。

debugger

点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图,然后点击那个齿轮图标来配置一个 launch.json 的文件,选择 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}/*"
      }
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

启动调试,在需要设置断点的页面设置一个断点,即可断点调试,如下图所示。

Debugger

这种方式是使用 vscode 提供的调试工具调试, vscode 的调试工具还是比较全面的,基本的逐行调试,查看变量值(watch) 什么的都有,而且它的使用让我感觉像是在调试后端代码,不过Debugger for Chrome 的缺点也很明显,并不能及时复现 BUG, 因为它的调试是重新打开一个 Chrome Tab 页,相当于重启,而重启以后很多调试的环境已经是不存在了,失去了调试的可能。当然随着工具的不断提升,这些问题都会慢慢被完善。

4、其他方式

平时开发中还可以使用辅助语句如:console.log(),把这个写在代码中,使用chrome,运行到这一行,会直接在结果显示在浏览器控制台上。

类似 console 这种打印信息的调试方法,几乎每种语言都有,而 JS 也是非常多人在使用,而且也很方便,需要调试的地方就去插入console类的输出语句就可以打印相关的信息,还可以根据不同类型的调试输出不同颜色,不同类型的提示,比如 console.log, console.error, console.info...我基本只用console.log, 其具体使用方式如下

function getData() {
  // ...
  const data = console.log(data); //...;
}

简单的输出你需要的信息,比如你想知道接口返回的数据是什么?有没有返回正确的数据?当发现渲染错误的时候我可能就会去打印一下,其实这种调试思路有点像黑盒测试,不用去管内部实现,就是看用户输入得到的输出是什么

console

console 调试还有一个优点就是,打印的数据具有完整的数据结构,类似对象,数组之类的值,可以清晰的看到它的数据结构,像 JS 这种具有复杂引用的语言,可以查看它的原型链,即使是 vue 负责项目的开发中也能帮助我们进一步分析输出,这也是浏览器提供给我们的便利。

console

以上介绍的几种方式,最推荐使用的是vue的chrome插件来进行调试(方式二)

参考资料

vue-devtools:https://devtools.vuejs.org/

在 VS Code 中调试:https://v2.cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

Vue2.x 组件通信方式:http://www.guosisoft.com/article/detail/411234710110277

Vue 前端开发团队风格指南(史上最全):http://www.guosisoft.com/article/detail/415491255230533

结语

如果本文对你有一点点帮助,点个赞支持一下吧,你的每一个【赞】都是我创作的最大动力 _

更多技术文章请往:http://www.guosisoft.com/article,大家一起共同交流和进步呀



这篇关于【保姆级教程】Vue项目调试技巧的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程