一直觉得vue的单步调试很费劲，webpack编译后的代码让人难以捉摸，因为平时使用vs code开发环境，网上找了各种关于vs code单步调试vue的文章做了各种尝试都没成功，断点永远都进不去，断点处一直显示 已设置断点但还未绑定。没找到问题所在，有知道大神们的期待告知哦。
使用vue-devtools插件的就不说了哈，也是一个调试的好工具，大家自行百度哦
后来找到一个可以用的方法就是在断点处加debugger,这样就是进入断点进行调试了，但是这样做的缺点也显而易见，调试结束还得一一删除，甚是不便。
倒腾到最后才发现现在chrome已经支持webpack的调试了，不需要做任何操作就能和以前一样使用chrome的调试器来调试vue。
在source的webpack://节点下，直接就是源文件了，在源文件中直接下断点就可以了！！
image.png
就是这么简单，不知道的都走了不少冤枉路了，与君共享哈。
一直觉得vue的单步调试很费劲，webpack编译后的代码让人难以捉摸，因为平时使用vs code开发环境，网上找...
前言 vue-devtools 是一款 chrome 插件，用于 vue 的调试工作 安装 chrome 商店(需...
Chrome浏览器安装vue、react调试工具 1.下载调试插件：https://chrome.zzzmh.cn...
Source调试JS代码 理解单步调试，单步进入块，单步退出块的区别 单步调试F10 跳过当前函数调用 单步进入块...
下载vue调试工具插件 访问地址：vue调试工具插件[https://chrome.zzzmh.cn/info?t...
先导 vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大...
vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大地提高...
前言 vue-devtools是用于调试vue应用，这可以极大地提高我们的调试效率。 chrome商店直接安装 v...
chrome调试插件vue-devtools安装步骤： 1.npm install vue-devtools 2....
1、调试 单步调试：fn + F8单步进入：fn + F7单步跳出：fn + F8 + shift单步进入源码：f...
本文标题：chrome下的Vue单步调试
本文链接：https://www.haomeiwen.com/subject/qgwioftx.html
网友评论