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

目录
  • 一、在 VS Code 中配置调试
  • 二、debugger语句
  • 三、Vue Devtools
  • 总结

一、在 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

总结

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

赞 (0)

相关推荐

  • VUE 配置vue-devtools调试工具及安装方法

    1. 通过 Git 克隆项目到本地 git clone https://github.com/vuejs/vue-devtools.git 2. Git 进入到 vue-devtools 所在目录,然后运行以下两个指令. 先运行 npm install 安装项目依赖 再运行 npm run build 进行编译生成 这两条指令的运行都需要一定的时间,请耐心等待,build 成功后如下图: 3.修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件.

  • Vue调试神器vue-devtools安装方法

    Vue调试神器vue-devtools安装方法

    什么是vue-devtools? vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我们就介绍一下vue-devtools的安装. 安装方式 1.chrome商店直接安装: vue-devtools可以从chrome商店直接下载安装,非常简单,这里就不过多介绍了.不过要注意的一点就是,需要翻墙才能下载. 2.手动安装: 第一步:找到vue-devtools的github项目,并将其clone到本地. vue-devtools g

  • 在IDEA中Debug调试VUE项目的详细步骤

    在IDEA中Debug调试VUE项目的详细步骤

    调试js代码,每次都在要在代码中写debugger,或者在chrome中打断点,而且chrome的断点信息不人性化.偶然发现idea竟然有这个功能,简直神器啊.研究了半天终于搞定了,哈哈,开心.下面是详细步骤: 1.下载浏览器插件 在chrome应用商店搜索"jetbrains ide support"插件,可能需要FQ(不会百度,老D google host),如下图,这里是我安装好的.这里我试过找下载好的插件,安装但是没有连接成功,总是提示错误,下文会提到.所以别偷懒,老老实实下载

  • Vue3.x源码调试的实现方法

    几句话说下我看源码的方式 断点调试 根据demo小例子或者api的使用姿势进行调试,每个小例子只关心其走过的逻辑分支. 如何调试vue3.x的ts源码 官网说使用 yarn dev 命令就可以对其进行调试,可是运行该命令后,是生成过后的代码,不能对其编写的ts源码进行调试. 其实再生成对应的sourcemap文件,便可以原汁原味的调试. 先看下几个截图: 如果这是你想要的调试效果,下面请看下如何生成sourcemap文件. 生成sourcemap文件 rollup.js中文文档 // rollu

  • Vue程序调试的方法

    1.写本文的背景 因为程序的调试非常重要,程序猿可以利用好的调试方法去查找定位自己的问题所在之处.从而,达到纠正自己程序错误的地方,健壮自己的程序,让问题变得越来越少,程序变得越来越健康.故作此文,而且日后会将实用的调试程序方法不断进行迭代更新. 2.调试与测试 调式与测试实际有异曲同工之妙,只不过对象不同.测试面向的是产品级,系统级:而调试往往是程序里的某一部分,某个方法,某个属性或者对象.最终效果也很类似,好的测试人员,测试方案可以将产品系统的问题解决在摇篮中:好的调试方法也会让你对程序的运

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

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

    目录 一.在 VS Code 中配置调试 二.debugger语句 三.Vue Devtools 总结 一.在 VS Code 中配置调试 使用 Vue CLI 2搭建项目时: 更新 config/index.js 内的 devtool property: devtool: 'source-map', 点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图: 选择Chrome/Firefox:Launch 环境.将 launch.json 的内容替换为: { "ve

  • Django Rest framework三种分页方式详解

    Django Rest framework三种分页方式详解

    前言 我们数据库有几千万条数据,这些数据需要展示,我们不可能直接从数据库把数据全部读取出来. 因为这样会给内存造成巨大的压力,很容易就会内存溢出,所以我们希望一点一点的取. 同样,展示的时候也是一样的,我们必定会对数据进行分页显示. 本文将详细讲述DRF为我们提供的三种分页方式. 全局配置 REST_FRAMEWORK = { # 对所有分页器生效,但优先级低 'PAGE_SIZE': 5, # 每页显示5条数据 } 我们先准备好用于测试分页的数据以及序列化类 数据表 from django.d

  • Vue网络请求的三种实现方式介绍

    Vue网络请求的三种实现方式介绍

    目录 1.XMLHttpRequest发送请求 2.fetch发送请求 3.axios请求库(Vue中推荐写法) 模拟发送get和post请求 网络请求时发送用户认证信息 请求拦截器 响应拦截器 用户管理 在进行 Vue 的网络请求之前,我们先写一些假数据: users.json: [ { "id": 1, "name": "张三" }, { "id": 2, "name": "李四"

  • vue路由传参三种基本方式详解

    这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> methods: 方案一: getDescribe(id) { // 直接调用$r

  • Python selenium 三种等待方式详解(必会)

    很多人在群里问,这个下拉框定位不到.那个弹出框定位不到-各种定位不到,其实大多数情况下就是两种问题:1 有frame,2 没有加等待.殊不知,你的代码运行速度是什么量级的,而浏览器加载渲染速度又是什么量级的,就好比闪电侠和凹凸曼约好去打怪兽,然后闪电侠打完回来之后问凹凸曼你为啥还在穿鞋没出门?凹凸曼分分中内心一万只羊驼飞过,欺负哥速度慢,哥不跟你玩了,抛个异常撂挑子了. 那么怎么才能照顾到凹凸曼缓慢的加载速度呢?只有一个办法,那就是等喽.说到等,又有三种等法,且听博主一一道来: 1. 强制等待

  • iconfont的三种使用方式详解

    在我们项目中经常要使用到iconfont,在此我们使用阿里巴巴矢量库提供的icon图标,此图标库足够为我们提供大量的图标,我们首先需要的事在阿里巴巴矢量图标库新建一个自己的账号,并且新建一个项目,这个项目包含了你所有要用到的图标.我们需要选中需要的图标放到自己的项目中,并下载下来放到自己项目下的iconfont文件夹之下.(需要更新图标时,下载包也需要重新下载更新) 方式一:使用symbol方式(本质是用svg标签构成的) 第一步:为了代码更好的复用,我们封装一个svg-icon组件,代码如下:

  • 详细解读分布式锁原理及三种实现方式

    目前几乎很多大型网站及应用都是分布式部署的,分布式场景中的数据一致性问题一直是一个比较重要的话题.分布式的CAP理论告诉我们"任何一个分布式系统都无法同时满足一致性(Consistency).可用性(Availability)和分区容错性(Partition tolerance),最多只能同时满足两项."所以,很多系统在设计之初就要对这三者做出取舍.在互联网领域的绝大多数的场景中,都需要牺牲强一致性来换取系统的高可用性,系统往往只需要保证"最终一致性",只要这个最终

  • IIS下PHP的三种配置方式对比

    在Windows IIS 6.0下配置PHP,通常有CGI.ISAPI和FastCGI三种配置方式,这三种模式都可以在IIS 6.0下成功运行,下面我就讲一下这三种方式配置的区别和性能上的差异.   1.CGI(通用网关接口/Common Gateway Interface)一般是可执行程序,例如EXE文件,和WEB服务器各自占据着不同的进程,而且一般一个CGI程序只能处理一个用户请求.这样,当用户请求数量非常多时,会大量占用系统的资源,如内存.CPU时间等,造成效能低下.   2.ISAPI(

  • java中进程与线程_三种实现方式总结(必看篇)

    java中进程与线程_三种实现方式总结(必看篇)

    一:进程与线程 概述:几乎任何的操作系统都支持运行多个任务,通常一个任务就是一个程序,而一个程序就是一个进程.当一个进程运行时,内部可能包括多个顺序执行流,每个顺序执行流就是一个线程. 进程:进程是指处于运行过程中的程序,并且具有一定的独立功能.进程是系统进行资源分配和调度的一个单位.当程序进入内存运行时,即为进程. 进程的三个特点: 1:独立性:进程是系统中独立存在的实体,它可以独立拥有资源,每一个进程都有自己独立的地址空间,没有进程本身的运行,用户进程不可以直接访问其他进程的地址空间. 2:

  • Android XML数据的三种解析方式

    Android XML数据的三种解析方式

    本篇文章包含以下内容: XML数据的Dom解析      XML数据的Sax解析      XML数据的Pull解析      Activity中使用三种解析      Sax解析与Pull解析区别 三种解析方式的步骤: 1.在Assets文件夹中模拟创建XML数据 2.创建对应XML的Bean对象 3.开始解析 XML数据的Dom解析 DOM解析XML文件时,会将XML文件的所有内容读取到内存中(内存的消耗比较大),然后允许您使用DOM API遍历XML树.检索所需的数据 一.在Assets文

随机推荐