首页专题 vue调试

vue调试

很多同学在进行编程学习时缺乏系统学习的资料。本页面基于vue调试内容，从基础理论到综合实战，通过实用的知识类文章，标准的编程教程，丰富的视频课程，为您在vue调试相关知识领域提供全面立体的资料补充。同时还包含 vagrant、val、validationgroup 的知识内容，欢迎查阅！

vue调试相关知识

我司小伙伴研发的 vue 组件调试工具开源了！
我司小伙伴研发的 vue 组件调试工具 VCI(vue component inspector)，现在开源了，欢迎关注 star ！工具特点：可直接通过界面定位组件，可修改 data, 可追踪 prop 事件执行代码，详见 https://github.com/zglz/vue-component-inspector
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文件。将 persistent 参数改为 true，如下图： 4. 将扩展程序添加到chrome浏览器a. 打开浏览器扩展程序（也可以直接在地址栏输入 chrome://extensions/  来打开） b. 打开扩展程序后，开启
console 调试技巧
前言如果统计一番前端最常用的方法，那么 console.log 一定位列其中。无论你写的是原生 JS 亦或者是 JQuery、Vue等等，调试之时，都离不开 console.log 方法。但是，console 对象中的方法不仅仅只有 log 方法。强大的 console 对象提供了大量控制台调试的相关方法，掌握这些方法可以大大方便你的调试，甚至做出一些炫酷的控制台字符画。基本输出console 对象最基础的方法毫无疑问是 log，该方法会直接在控制台上输出参数，如果输入多个参数，那么输出在控制台上的参数用空格分隔，如下所示：console.log('Hello World');console.log('Hello', 'World');打开控制台，运行结果如下图所示：console.log 还含有类似于 Python 的占位符功能，但是，个人认为该功能可以完全被 ES6 中的字符串模板完全替代，有兴趣的可以去了解，在此不再赘述。分类输出厌倦
chrome调试手机端页面 -- weinre
作为前端工程师，需要调试各个端的页面，我们熟悉chrome调试电脑端样式，对手机端却觉得有点无奈推荐一款工具weinre1. 安装weinre首先你要有node.js的环境，使用npm install -g weinre安装weinre2. 运行weinreweinre --boundHost -all-3. 启动 debug client浏览器打开http://localhost:8080/（localhost是你本地的ip地址）看到以下页面，说明运行成功6.png4. 引入script打开debug client user interface的链接地址image.png向你的页面中加入因为我的是VUE单页面项目，只要在index.html加入这个就行了    <script src="http://ip地址:端口号/target/target-script-min.js#anonymous" type="te