脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue提供的三种调试方式

Vue提供的三种调试方式你知道吗

 更新时间：2022年01月18日 11:41:03   作者：长不大的大灰狼  
这篇文章主要为大家介绍了Vue提供的三种调试方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

一、在 VS Code 中配置调试

使用 Vue CLI 2搭建项目时：

更新 config/index.js 内的 devtool property：

devtool: 'source-map',

点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图：

在这里插入图片描述

选择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}/" }]
    }
  ]
}

开始调试：

设置断点：

在这里插入图片描述

#启动项目
npm run dev

在debug页面选择“vuejs：chrome”：

在这里插入图片描述

二、debugger语句

推荐

function potentiallyBuggyCode() {
    debugger
    // do potentially buggy stuff to examine, step through, etc.
}

浏览器：F12打开DevTools，当运行程序后，会停在debbger语句：

在这里插入图片描述

注意：当安装了Eslint插件时，点击快速修复，Disable no-debugger for this line.不然，保存时会自动清除debugger语句。

在这里插入图片描述

三、Vue Devtools

谷歌浏览器的插件。

详情参考官方链接：https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#Vue-Devtools

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

相关文章

  • vue的图片需要用require的方式进行引入问题

    vue的图片需要用require的方式进行引入问题

    这篇文章主要介绍了vue的图片需要用require的方式进行引入问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03
  • Vue3使用MD5加密实战案例(清晰明了)

    Vue3使用MD5加密实战案例(清晰明了)

    MD5是一种信息摘要算法(对称加密),一种被广泛使用的密码散列函数,可以产生出一个128位(16字节)的散列值,用来确保信息传输完整一致性,这篇文章主要给大家介绍了关于Vue3使用MD5加密的相关资料,需要的朋友可以参考下
    2023-05-05
  • vue3封装轮播图组件的方法

    vue3封装轮播图组件的方法

    这篇文章主要为大家详细介绍了vue3封装轮播图组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue 富文本编辑器tinymce的安装配置使用教程

    Vue 富文本编辑器tinymce的安装配置使用教程

    TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成,TinyMCE是一个根据LGPL license发布的自由软件,你可以把它用于商业应用,这篇文章主要介绍了Vue 富文本编辑器tinymce的安装教程,需要的朋友可以参考下
    2023-09-09
  • vue开发页面自适应屏幕尺寸的实例代码

    vue开发页面自适应屏幕尺寸的实例代码

    使用vue开发的页面都是通过px设置它的尺寸，如果换了一个不同尺寸的屏幕就会出现页面排版错乱，显示不完整等情况，下面通过插件将px装换为rem单位适应不同尺寸的屏幕,需要的朋友可以参考下
    2022-12-12
  • vue单页面实现当前页面刷新或跳转时提示保存

    vue单页面实现当前页面刷新或跳转时提示保存

    这篇文章主要介绍了vue单页面实现当前页面刷新或跳转时提示保存，在当前页面刷新或跳转时提示保存并可取消刷新，以防止填写的表单内容丢失，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Vue3如何在SCSS中使用v-bind

    Vue3如何在SCSS中使用v-bind

    这篇文章主要介绍了Vue3如何在SCSS中使用v-bind,通过template先创建一个通用的页面结构,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • vue实现购物车的小练习

    vue实现购物车的小练习

    这篇文章主要为大家详细介绍了vue实现购物车的小练习，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • Vue.js 踩坑记之双向绑定

    Vue.js 踩坑记之双向绑定

    这篇文章给大家带来了Vue.js 踩坑记之双向绑定问题，非常不错，具有参考借鉴价值，感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • vue项目中常见的三种文件类型在线预览实现(pdf/word/excel表格)

    vue项目中常见的三种文件类型在线预览实现(pdf/word/excel表格)

    最近在项目中要做一个pdf在线预览的功能,索性给大家整理个全面的,这篇文章主要给大家介绍了关于vue项目中常见的三种文件类型在线预览实现的相关资料,文件类型分别是pdf/word文件/excel表格,需要的朋友可以参考下
    2022-05-05

最新评论