手机调试 H5 vue-devtools weinre fiddler
手机调试 H5（vue 方向）
代码 bug 多没关系，关键是可以及时定位到问题！
小提示：不知道是不是 fiddler 的原因，不能在微信的网页注入 JS。所以以下调试均在手机浏览器中进行，当然如果可以自己在页面引入调试资源，那也是可以滴！
手机使用 vue-devtools 调试
开发 vue 应用的时候，chrome/firefox 有
vue-devtools插件。那手机端呢？还有最新的edge浏览器，虽然说兼容 chrom 插件，可是也是一番折腾。于是找到了 vue-devtools 的 github 仓库
先上效果图：
根据文档提示，可以用 npm 安装
# 安装 vue-devtools
npm install -g @vue/devtools# 打开vue-devtools
vue-devtools
打开后就能看到我上面的图的效果，有 2 个 script 标签，其实都是本地的。这时候最好选择是 IP 地址的标签，放入到页面的 index.html 的 head标签的第一行！
为啥需要放在 head 的第一行？
文档也有说，调试插件引入必须在 vue 文件引入之前。所以引入的时候应该是这样的：
其次，只是引入了 JS 文件，PC 端调试是没问题了，可是手机端一直连不上！
这是因为，就算采用了 IP 地址的 script。在手机端发送调试请求的时候依旧发送的是
localhost:8098。所以我们还得指定发送调试请求的 IP 地址。
最后改成这样子：
完整代码:
<!-- IP地址记得改成你们自己本地的IP -->
<script src="http://192.168.0.105:8098"></script>
<script>window.__VUE_DEVTOOLS_HOST__ = '192.168.0.105'window.__VUE_DEVTOOLS_PORT__ = '8098'
</script>
可是这会有一些隐患，万一项目打包上线咋办？岂不是每次打开我都得删除这行代码，打完包我想调试在把这行代码放回去？NO NO NO。于是我们找到了 fiddler。动态帮我们注入这段 JS
使用 fiddler 注入 JS
使用 fiddler 固然方便，也不用怕打包上线的时候忘记去掉调试，可是在微信中貌似注入不了，如果有知道怎么解决的欢迎留言
手机调试 H5 vue-devtools weinre fiddler相关推荐
- hbuilderx本地调试h5 vue应用的时候，怎么使用https证书？
使用uniapp在本地开发的时候,有时候是需要有https证书的,不然会提示证书错误.像camera的授权使用,还有gps地理位置的授权使用.如果没有https证书是很麻烦的. 那么可以在hbuild ...
- 手机Web前端调试页面之——Chrome DevTools（谷歌浏览器）的模拟手机调试
Chrome DevTools(谷歌浏览器)的模拟手机调试 前言 在客户端开发中,由于使用手机app加载webview页面,客户端与前端经常会出现数据交互情况: 但是在手机中无法调试看到前端代码的步骤 ...
- vue 在浏览器控制台怎么调试 谷歌插件vue Devtools
vue 在浏览器控制台怎么调试 谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data, ...
- 【进阶篇】Vue Devtools——vue开发调试神器
工欲善其事,必先利其器,vue2.0进阶系列的知识更接近我们的实际开发所需,在开发过程中,有个好的调试工具是事半功倍的,Vue Devtools就是我们选择的调试工具,它是一款chrome浏览器的插件 ...
- H5 VUE实现手机签名功能
H5 VUE实现手机签名功能 功能描述: 利用canvas实现手机签名转化成图片( 包含重绘,由于手机全屏展示 所以还添加了图片翻转) 上传后台 功能展示: 这里是封装了一个小组件 废话不多说上代码: ...
- vue项目 手机调试配置
vue开发手机版项目过程中,需要手机调试,网上给的方法有很多, 我的设备是win10电脑 + 安卓手机, 常用两种手机调试本地项目方法:chrome和微信开发者工具. 一.vue-cli2项目中更改配 ...
- 安卓手机联调Chrome调试H5页面
欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~ 文章目录 1 前言 2 debugx5.qq.com 3 手机连接电脑并打开开发者选项和USB调试 ...
- android手机联调,安卓手机联调Chrome调试H5页面
欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~ 文章目录 1 前言 2 debugx5.qq.com 3 手机连接电脑并打开开发者选项和USB调试 ...
- Vue DevTools可使用修正方法
因为工作要求,目前主要在用Vue.js技术栈做开发,调试是必不可少的,这里会用的Vue DevTools的调试工具,问题就出在这里,当用Vue DevTools做调试时,很多时候都不能用,提示没有监测 ...
最新文章
- C#/Net代码精简优化技巧
- 前端三十三:表单form
- listen()函数中backlog参数分析
- excelutil java_JAVA实现Excel的读取--ExcelUtil工具类
- java8新特性简述
- Jm86中的encode_one_macroblock注释
- ABP框架 v2.7.0已经发布!
- 获取网络接口信息——ioctl()函数与结构体struct ifreq、 struct ifconf
- java学习（95）：线程的优先级
- qt程序部署在linux,Qt应用打包发布，部署真正的Qt程序LinuxWindows-Go语言中文社区...
- gcc编译的几个重要参数
- html提交表单使用python计算_使用Python计算股票期货，量化程序化交易
- 快速解决杰奇网站模块出现This function is not valid!的问题
- Mac系统制作win10启动U盘踩坑实操
- 渐进式Express源码学习2-道士下山
- 基于JAVA彩票在线购买系统计算机毕业设计源码+系统+lw文档+部署
- 惠普刀片服务器型号,HP ProLiant刀片服务器简介
- mosquitto基本使用
- 27家中美名校借阅榜对比公开：差别太大了
- word中将一种颜色的突出显示批量替换为另一种
热门文章