chrome下的Vue单步调试

最新推荐文章于 2024-07-19 10:33:49 发布
最新推荐文章于 2024-07-19 10:33:49 发布
阅读量1.5k 收藏 2
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yz18931904/article/details/106477632
版权

一直觉得vue的单步调试很费劲，webpack编译后的代码让人难以捉摸，因为平时使用vs code开发环境，网上找了各种关于vs code单步调试vue的文章做了各种尝试都没成功，断点永远都进不去，断点处一直显示 已设置断点但还未绑定。没找到问题所在，有知道大神们的期待告知哦。

使用vue-devtools插件的就不说了哈，也是一个调试的好工具，大家自行百度哦

后来找到一个可以用的方法就是在断点处加debugger,这样就是进入断点进行调试了，但是这样做的缺点也显而易见，调试结束还得一一删除，甚是不便。

倒腾到最后才发现现在chrome已经支持webpack的调试了，不需要做任何操作就能和以前一样使用chrome的调试器来调试vue。
在source的webpack://节点下，直接就是源文件了，在源文件中直接下断点就可以了！！



 

金箍一梦何来愁
关注
专栏目录
Vue之 vconsole 方便微信端调试
XiChuan的博客
02-20 3051
在手机微信端无法想Chrome看到控制台打印出来的消息，对程序的调试来说是非常不便的，此时就需要插件来实现这种功能，vconsole就是这种作用。 1.安装 npm install vconsole 2.创建vconsole.js文件，内容是引入vconsole import Vconsole from 'vconsole' const vConsole = new Vconsole(...
chrome--devtools Mac
08-03
你可以在此设置断点，进行单步调试，查看变量值，以及优化JavaScript性能。 四、网络面板（Network） 网络面板记录了页面加载时所有的网络请求，包括图片、脚本、样式表等资源。你可以分析加载时间、查看响应数据，...
vue-devtools(chrome vue 调试插件)
12-02
chrome（谷歌浏览器）vue代码调试插件， 已打包。解压后，通过chrome扩展程序加载即可使用。 使用方法： 1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面 2、勾选开发者模式 3、点击“加载已解压的扩展程序...”按钮，选择解压后的chrome文件夹，即可添加成功。 4、添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息
Vue.js源码分析——单步调试响应式
雅萍儿的博客
01-29 345
同样是Vue.js专栏系列，本文算是自己的查缺补漏，如果有不正确的地方欢迎大家指正，如果觉得在文中有所收获也欢迎大家点上宝贵的???? 写文不易，请多鼓励 参考文章：图解Vue响应式原理 准备代码 这个文章很简单，主要是看下面的代码运行的过程 <script src="../../dist/vue.js"></script> <body> <div id="app"> {{ msg }} </div> <script&
vue项目源码调试方法 ，chrome调试控制台工作区使用，利用chrome控制台调试vue项目源码的方法 图解
07-19 994
我们在开发vue项目的时候，项目开始后的第一件事情应该就是准备调试工作了，Chrome调试控制台就给我们提供了这样的一个方便的调试工作区。在这个时候我们再次却换到网页标签，就可以看到有2个vue文件，右下角带绿色标识的就是我们添加的项目中的真正的源码文件，而另外一个则是经过webpack处理后的源码文件。在我们点击允许后，chrome就会自动帮我们却换到工作区标签，同时会以高亮的形式显示我们当前浏览的页面和我们的项目源码的对应关系，如下图。选择之后会有一个提示，点击允许。
vue源码单步调试
ssjjrr的博客
01-30 909
vue框架源码分析，使用浏览器调试工具，单步调试
chrome安装vue调试工具
l_537的博客
09-06 2177
1. 首先下载Vue Devtools调试工具 [https://github.com/vuejs/vue-devtools/tree/v5.1.1] 2. 复制网址，在浏览器打开按照图示操作 3. 下载成功后解压即可，如下图所示 4. 解压后打开cmd命令切换到G:\Vue Devtools工具\vue-devtools-5.1.1路径下（你们安装的路径自己切换） 5. 切换命令成功后使用命令npm install下载，下载成功如下图所示 6. 然后在npm run build 如下图所示 7
chrome浏览器 调试 vue
05-25
调试Vue可以使用Chrome浏览器的开发者工具。首先打开Chrome浏览器，然后按下F12键，或者右键点击页面空白处，选择“检查”选项。 在开发者工具中，切换到“Sources”选项卡，可以看到项目中的所有文件。找到Vue组件...
利用webstrom调试Vue.js单页面程序的方法教程
10-19
运行应用并在WebStorm中设置好断点后，当应用执行到断点时，浏览器会暂停，同时WebStorm的调试器会被触发，此时你可以在WebStorm中观察和分析应用的状态，并进行单步调试，逐步执行代码，检查变量，以确保程序按预期...
webstorm vue项目调试
最新发布
07-27
5. **单步调试**：在调试模式下，你可以使用控制台、步进（Step Over、Step Into、Step Out）以及查看变量值等工具来逐步执行代码并检查状态。 6. **检查组件实例**：在调试过程中，可以查看到`this`引用的是哪个...
vue开发调试
xixingzhe2的博客
09-06 989
当遇到应用逻辑出现错误，但又无法准确定位的时候，同后台项目开发一样，可以在JS实现的应用逻辑中设置断点，并进行单步、进入方法内、跳出方法等调试，从而准确定位问题根源。
【vue】调试快捷键
qxz2012_的专栏
08-23 502
option+command+i：浏览器打开开发者工具
Chrome 安装 Vue 插件 Vue Devtools
走向CTO的路上...
04-18 926
总体而言，Vue Devtools 是 Vue.js 开发者不可或缺的工具之一，它提供了丰富的调试和分析功能，使开发者能够更好地理解和优化他们的 Vue.js 应用程序。Vue Devtools 的原理基于 Vue.js 应用程序的调试工具，它与 Vue.js 应用程序进行通信并提供开发者友好的界面。与 Vue.js 通信：一旦连接到 Vue.js 实例，Vue Devtools 与应用程序进行通信，获取当前组件层次结构、数据和状态的变化等信息。
谷歌浏览器调试vue项目
weixin_38526093的博客
02-07 5283
众所周知,在项目过程中我们常常遇到的一个问题就是本地调试的时候没问题但是发布到线上的时候就不行了。在时间充裕的情况下,我们当然可以慢慢调试,但是那是不可能的。选择完文件夹之后右键点击已打开的test.html标头 选择 "save for overrides" 将test.html保存到我们选的文件夹中。它能够实现 在不改动源码且不用重新打包发布就能改变前端脚本的执行逻辑,这样就大大减少了排错的时间。page页列出了当前浏览器中已打开的网站以及网站的页面文件,此时可以切换到Overrides选项卡。
vue debug 单点 Vue代码的debug调试 未编译
qq_38932474的博客
06-13 282
配置 vue.congfig.js configureWebpack: { devtool: 'source-map', },
Chrome上的Vue DevTools：Vue开发者的得力助手
2201_75568026的博客
04-10 699
Vue DevTools是Vue.js官方提供的一个强大插件，专为Chrome浏览器设计，用于帮助开发者调试Vue应用。它提供了状态管理、组件检查、事件监听等功能，极大地提升了Vue开发的效率和体验。本文将介绍Vue DevTools的安装过程、主要功能以及如何在实际开发中使用它来优化Vue应用的调试和性能分析。
在谷歌浏览器中安装vue调试工具vue-devtools
杂货铺
08-12 2445
在谷歌浏览器中安装vue调试工具vue-devtools 目录 在谷歌浏览器中安装vue调试工具vue-devtools 一、下载vue-devtools工具包 工具包git地址： https://github.com/vuejs/vue-devtools 分支选择master 二、安装依赖 到下载工具包目录下 cdvue-devtools-master cnpm install cnpm run build 注：第一次用cnpm有报错，用npm就好了 三、在谷歌浏览...
如何在chrome中安装Vue调试神器vue-devtools
禅思院
02-13 3098
前言 最近研究一下vue-devtools，感觉还蛮不错的,顺便尝试安装了一下。 vue-devtools是什么? vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。 系统环境 vue-devtools如何安装? 第一种安装方法,考验自己的动手能力，对于我们开发来说，这都不是事儿，因为在安装成功的那一刻,有一种自豪的感觉。 在gi...
vue js代码单步调试
09-21
要在浏览器中进行Vue.js代码的单步调试，可以按照以下步骤操作： 1. 将以下代码添加到你的HTML文件中： ```html <script> debugger; </script> ``` 这个代码会在浏览器中的控制台中设置一个断点，让你可以逐行地调试Vue.js源码。 2. 在浏览器中打开该HTML文件。 3. 打开浏览器的开发者工具（通常是按下F12键或右键点击页面并选择"检查"选项）。 4. 切换到"控制台"选项卡，并确保"断点"选项卡是开启的。 5. 刷新页面，使得代码执行到设置的断点处。 6. 可以使用调试工具提供的方法，如"继续"、"下一步"、"进入"、"跳出"等来逐行调试Vue.js源码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值