微信开发工具使用 vue-devtools

Vue Devtools 是 Vue 官方提供的浏览器插件,可以查看挂载在对应组件的属性。类似 Chrome 开发工具查看元素,最大的功能其实还是查看组件结构和数据。业务开发来说的话一般开发大部分时间都是在看接口,对数据。所以调试工具可以大大提高开发效率

微信开发工具一般我们会用来调试微信的项目,因为登陆态如果是微信的,不用微信开发工具调试就会出现引导到微信打开的情况。

安装@vue/devtools

推荐全局安装

npm install -g @vue/devtools

运行

vue-devtools

启动后会默认在 8098 端口开启调试工具,之后就是链接项目代码到调试工具上。

链接调试工具

方法一

<head>标签添加如下代码,就是如果是开发模式就链接 8098 端口的脚本

<% if (NODE_ENV === 'development') { %>
<script src="http://localhost:8098"></script>
<% } %>

自定义 IP 和端口可以看这里open in new window

方法二

whistle 是一个代理工具,类似 fiddle,具体可以看官方文档open in new window

方法二利用 whistle 的 htmlAppend 载入脚本,譬如

xxxxx/index.html http://127.0.0.1:8090/index.html htmlAppend://{vueDevtools.html}

vueDevtools.html

<script src="http://localhost:8098"></script>

效果

vue-devtools in 微信开发工具

Last Updated:
<manfred>峯</hu>
欢迎关注微信公众号 【Big前端】无广告,无软文,就是这么傲娇。直推一线大厂高质量内容,不局限于前端·后台·运维相关,还包括房价🏠、信用卡💳等内容也可内推一线大厂腾讯阿里字节,对腾讯字节比较熟悉,简历可以发给我,我会给你介绍一线大厂的情况,让你更加了解一线大厂