chrome浏览器debug vue项目，跳过vue源码

在开发vue-cli的项目，也会用到webpack，npm等工具。在debug的时候，只是想看当前代码的执行情况。但是调试就会经常进入到vue.esm.js等一些源码文件。一进去就一直跳不出来了，十分麻烦。

Chrome调试

也是才知道，谷歌浏览器其实有一个黑盒功能，可以设置忽略的文件。设置后，debug就不会进入到这些文件。
F12 点击设置按钮
在 Ignor List 里添加要忽略的文件名称即可。

Debugger for Chrome 调试

1.安装插件

2.添加launch.json配置文件
点击设置按钮，vscode会创建一个launch.json配置文件。

修改配置文件如下
注意这里的url对应你本地项目的启动地址。

{// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0","configurations": [{"type": "chrome","request": "launch","name": "Vue Debugger","url": "http://localhost:9538","webRoot": "${workspaceFolder}/src","breakOnLoad": true,"smartStep": true,"skipFiles": ["node_modules","${workspaceRoot}/node_modules/**/*.js","<node_internals>/**/*.js","node_modules/**/*.js"],"sourceMapPathOverrides": {"webpack:///src/*": "${webRoot}/*","webpack:///./~/*": "${webRoot}/node_modules/*"}}]
}

我尝试使用skipFiles属性去跳过node_modules的相关文件，但是怎么试都没有效果，有大佬知道的带带~。

3.按F5启动调试
启动后会自动弹出一个浏览器，打开你填写的url。然后就可以在代码里打断点调试了。

chrome浏览器debug vue项目，跳过vue源码相关推荐

（上）Vue+Echarts构建可视化大数据平台实战项目分享（附源码）
前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就是:数据的展示.处理和分析.目的是借助于图形化手段,清晰有 ...
一篇文章教会你创建vue项目和使用vue.js实现数据增删改查
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
vscode生成vue模板快捷键_VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法...
1. 安装一个插件,识别vue文件 2.新建代码片段文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定 3.粘贴入自己写的.vue模板 { " ...
list vue 添加数据方法_一篇文章教会你创建vue项目和使用vue.js实现数据增删改查...
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
（下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码）
回顾作者用心写作,请动动你可爱的小手点亮大拇指.你的鼓励是作者继续创作的动力- 前端的学习,不能仅仅依靠知识点的学习,实战项目的操作可以帮助我们整理知识点以及提高编程能力,更有助于学习和实践,最重要 ...
基于SpringBoot vue的茶叶商城平台源码和论文含支付宝沙箱支付
此项目是前后端分离的后台项目:shop 前端项目:Vue-shop 后端项目启动步骤: 1.先把sql导入数据库 2.把后台项目导入编辑器 3.修改数据库配置 4.启动项目前端项目启动步骤: ...
基于SpringBoot vue的电脑商城平台源码和论文含支付宝沙箱支付
演示视频: 基于SpringBoot vue的电脑商城平台源码和论文含支付宝沙箱支付演示视频支付宝沙箱: package com.java.controller;import java.util.* ...
java计算机毕业设计基于springboot+vue+elementUI的旅游网站(源码+数据库+Lw文档）
项目介绍旅游管理平台采用B/S模式,促进了旅游管理平台的安全.快捷.高效的发展.传统的管理模式还处于手工处理阶段,管理效率极低,随着用户的不断增多,传统基于手工管理模式已经无法满足当前用户需求,随着 ...
vue+django 微博舆情系统源码、深度学习+舆情扩散消失分析、舆情紧急等级、属地分析、按话题、情感预测、话题评论获取、提取观点、正面负面舆情、按区域检测舆情
项目背景 315又马上要到了,现在有开始对食品安全话题的关注地提升了,因此,本文系统对微博的食品安全话题进行分析,有如下的功能 1.展示当前食品安全事件相关的热点信息以及提供根据食品关键词,食品安全类 ...
springboot vue mysql企业人事系统源码+论文+答辩稿+PPT+远程安装配置
下载地址:https://download.csdn.net/download/NBass/81451853 淘宝店铺:程序敌项目介绍: springboot企业人事系统(含论文). 高清视频演示: ...

chrome浏览器debug vue项目，跳过vue源码

Chrome调试

Debugger for Chrome 调试

chrome浏览器debug vue项目，跳过vue源码相关推荐

最新文章

热门文章