场景

在使用IDEA等进行后台开发时可以直接在想要进行断点调试的地方双击添加一个断点，然后逐步或者逐过程进行调试。

但是在Vue中如果想要进行调试时，如果是在js中调试的话，可以直接添加一个debugger，然后在浏览器中打开检查进行断点调试。

但是如果在vue界面的话则没法逐步查看变量的值。

比如：

在Vue页面中，点击搜索按钮时

<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

会触发handleQuery方法

    resetQuery() {this.resetForm("queryForm");this.handleQuery();},

其中调用了请求查询数据的方法

    handleQuery() {this.queryParams.pageNum = 1;this.getList();},

然后会调用js中查询数据的方法

    getList() {this.loading = true;debuggerconsole.log(this.queryParams)listDdjl(this.queryParams).then((response) => {this.ddjlList = response.rows;this.total = response.total;this.loading = false;});},

这以上的操作都是在vue页面中进行的请求参数的封装和传递等。

如果想要查看这中间传递的参数的值等信息。

如果只是简单的加上debugger的话是没法查看的。

然后listDdjl是引用第三方js的方法，用来请求后台数据。

export function listDdjl(query) {debuggerreturnrequest({<BR>   url:'/kqgl/ddjl/getListBySx?pageNum='+query.pageNum+'&pageSize='+query.pageSize,method: 'post',data: query})
}

这样在js中直接添加debugger是可以直接进行调试的。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

使用外部浏览器调试的方式

打开项目的vue.config.js，修改configureWebpack，添加

devtool: '#eval-source-map',

完整配置代码

  configureWebpack: {name: name,devtool: '#eval-source-map',resolve: {alias: {'@': resolve('src')}}},

配置代码位置

然后就可以在想要调试的vue页面添加debugger

然后运行项目，打开外部浏览器，在调用添加debugger的方法时打开浏览器的检查

然后就可以进入到断点并可以进行逐步调试了。

使用VSCode的插件进行调试

打开VSCode，扩展中搜索debugger for Chrome

然后点击install，安装完成后还需要reload重新加载一下。

然后

然后在左边调试菜单下就会如上所示的调试界面，点击配置launch.json或者直接打开此文件

配置如上所示，url改为你的项目的有效启动地址，这里是本地的81端口

{// 使用 IntelliSense 了解相关属性。// 悬停以查看现有属性的描述。// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0","configurations": [{"type": "chrome","request": "launch","name": "Launch Chrome against localhost","url": "http://localhost:81","webRoot": "${workspaceFolder}"}]
}

然后可以在vue页面的方法中添加debugger或者直接在左边双击添加断点，然后点击调试按钮

然后就会弹出一个新的Chrome窗口，并打开上面配置的url，一般是登录成功后点击上面添加断点的页面会直接进入断点

Vue中进行断点调试的两种方式(使用外部浏览器和VsCode的 Debug for Chrome插件)相关推荐

Vue系列vue-router的参数传递的两种方式（五）
Vue系列vue-router的参数传递的两种方式前言一.编写Profile页面二.编写App.vue入口三.路由配置,index.js 四.对比route.params方式传参五.项目中 ...
在线直播源码，VUE 获奖名单滚动显示的两种方式
在线直播源码,VUE 获奖名单滚动显示的两种方式第一种: 使用vue-seamless-scroll组件: 1.安装vue-seamless-scroll npm install vue-seaml ...
html中获取modelandview中的json数据_从Bitmap中获取YUV数据的两种方式
从Bitmap中我们能获取到的是RGB颜色分量,当需要获取YUV数据的时候,则需要先提取R,G,B分量的值,然后将RGB转化为YUV(根据具体的YUV的排列格式做相应的Y,U,V分量的排列) 所以这篇 ...
TCP中recv解阻塞的两种方式
TCP中recv解阻塞的两种方式 1.收到客户端发送的数据 2.客户端关闭了套接字,可以通过判断收到数据的长度来判断客户端是否下线,长度为0代表已下线. send操作 1.在阻塞模式下send操作将会 ...
Java中线程的创建有两种方式
Java中继承thread类与实现Runnable接口的区别 Java中线程的创建有两种方式: 1．通过继承Thread类,重写Thread的run()方法,将线程运行的逻辑放在其中 2．通过 ...
指针数组下标JAVA_Java语言中可用下标和指针两种方式表示数组元素。
[判断题]一行可以写多条预处理命令 [判断题]如果一个java程序中有多个类,编译后只生成一个字节码文件,其名字同主类名一致. [判断题]Protected类型的实例变量只能在本类中使用,其他类中不可 ...
Vue中引入静态资源的几种方式
最近修改一些老项目,好多组件里面引入图片的方式不太一样,总感觉自己没有好好总结过,今天有时间参考了几篇帖子,就总结一下: 在总结之前看了一下vue-cli的文档,突然感觉之前可能是我忽略它了基本没有看 ...
在Scrapy中如何利用Xpath选择器从HTML中提取目标信息（两种方式）
点击上方"Python爬虫与数据挖掘",进行关注回复"书籍"即可获赠Python从入门到进阶共10本电子书今日鸡汤坚定,严谨,勤奋,开拓前一阵子我 ...
spring中AOP动态代理的两种方式
AOP动态代理的两种方式 Spring AOP动态代理的方式(spring的AOP默认是JDK Proxy) 浅谈这两种动态代理 JDK的动态代理,需要有实现接口动态代理--JDK Proxy ⚫ ...

Vue中进行断点调试的两种方式(使用外部浏览器和VsCode的 Debug for Chrome插件)

场景

实现

使用外部浏览器调试的方式

使用VSCode的插件进行调试

Vue中进行断点调试的两种方式(使用外部浏览器和VsCode的 Debug for Chrome插件)相关推荐

最新文章

热门文章