分享移动端真机调试几种方法(更新中)
最新更新请参考移动端真机调试
文章目录
- 安卓
- 浏览器场景
- X5内核类
- IOS
- windows调试ios
- MAC调试ios
- 跨平台通通用JS 注入类
- Vconsole
- Eruda
- weinre
- 拓展
- Electron 应用调试方法
- 最新方法
- 命令行
- 外部
- 已废弃
- 移动端抓包工具实践
- Fiddler
- Charles
- 常见问题
- 1. Mac os （big sur 11.4） Safari （11.4.1）网页检查器调试只显示控制台 来源 审核菜单。
- 2. Safari 远程调试移动端webview, 找不到 待调试页面
- 3. chrome inspect 一直不出现设备。
移动端前端开发经常会遇到在模拟器下没问题。一到真机就会各种问题，比如说微信内部调试h5。真机调试没有像PC 端一样方便，需要借助各种工具来实现，下面就列举下，我在项目中常用的一些调试方法。
安卓
安卓需要在 开启开发者模式。国内各种定制系统的开启方法不一致。具体的请使用google 或者 baidu 查询。
以原生android11 系统为例：
设置 -> 关于手机 -> 版本号 点击5次 输入PIN 密码 即可开启`
设置 -> 系统 -> 高级 -> 开发者选项 -> USB 调试 开启。
数据线连接安卓手机 -> 允许USB 调试
安卓11后默认支持无线调试，具体方法参考安卓11无线调试， 安卓10以下参考谷歌文档。
进行调试前，前完成以上准备。
浏览器场景
使用工具chrome inspect, 这是一个调试的神器，能解决大部分场景的调试问题。还可以配合其他工具应对一些特殊的场景。
常用的浏览器webkit 内核浏览器都可以使用此种方法。
打开手机浏览器输入网址打开网页
打开电脑 Chrome 地址栏输入chrome://inspect
点击inspect
控制台可以正常开始调试了（模拟器会屏蔽一些用户操作交互，比如点击事件，需要你操作真机，模拟器会同步的）
X5内核类
当然还有些场景是在APP内部比如说是微信内部的网页调试，或者是hybrid应用开发（X5内核类）。
1️⃣ 在使用x5内核的app内打开X5调试
2️⃣ 选择信息Tab，勾选打开Tbs内核inspector调试功能，打开vconsole调试功能。
3️⃣ 重启APP
4️⃣ 打开APP内任意一个h5页面， 如果出现vconsole就算成功。
5️⃣ 手机链接电脑，方法参考准备工作。
当您连接搭载 Android 4.2.2 或更高版本的设备时，系统会显示一个对话框，询问您是否接受允许通过此计算机进行调试的 RSA 密钥。这种安全机制可以保护用户设备，因为它可以确保只有在您能够解锁设备并确认对话框的情况下才能执行 USB 调试和其他 adb 命令。
6️⃣ 电脑打开chrome, 地址栏输入chrome://inspect, 等待你的设备显示，找到需要调试的webview， 点击inspect
这一步可能比较慢，如果打不开可以考虑使用代理。
IOS
ios 移动端调试原则上建议直接使用mac safari 调试简单易操作。
windows调试ios
1️⃣ 安装依赖
在windows 上调试的话要依赖第三方的工具。具体准备如下：
- iTunes(微软商店)
- ios-webkit-debug-proxy(需要使用scoop安装)
- remotedebug-ios-webkit-adapter（npm安装）
- chrome
2️⃣ iphone 开启 Web Inspector
设置位置
设置 - Safari浏览器 - 高级 - 网页检查器 开启
3️⃣ 连接iphone
通过USB连接电脑，启动iTunes可能会提示“信任此计算机”对话框。信任就可以了。
4️⃣ 启动ios-webkit-debug-proxy
命令行输入
remotedebug_ios_webkit_adapter --port=9000
5️⃣ 打开Chrome DevTools
打开chrome浏览器地址栏输入chrome://inspect/#devices, 在手机safari打开网页，等待片刻就可以在chrome devTools 看到的网页了，点击下方的inspect 即可。
MAC调试ios
1️⃣ 开启mac safari 的开发菜单
2️⃣ 连接
打开mac电脑的safari 浏览器， 点击菜单开发选项， 选择设备，应用，调试的网页。
3️⃣ 通过元素或者控制台、网络等调试
跨平台通通用JS 注入类
此类都是通过插入dom, 模拟调试工具，使用起来也比较简单，引入js, 初始化就可以了。
Vconsole
现在用的最多的应该是腾讯的Vconsole, 小程序内置的也是这个，基本的功能都可有。但是有时候Network查看响应数据滚动会有一下bug。Dom 面板查看dom树不好用
支持插件
Vconsole 文档地址
Eruda
功能更齐全一点，但是资源会更大一点，DOM Network 的使用体验更好。还有一些开发的功能，显示所有边框，刷新页面（APP 内调试方便），一些H5 新接口的测试等等
支持插件，扩展更多功能
Eruda
weinre
weinre这个比较早了，最早的微信网页调试工具内置的调试工具就是这个。设置相对麻烦，但是可以通过局域网连接电脑调试手机页面。这个很久不维护了，而且chrome://inspect, 体验比这个好太多了。
weinre
拓展
Electron 应用调试方法
最新方法
Electron 浏览器窗口中的 DevTools 只能调试在该窗口（即网页）中执行的 JavaScript。要调试在主进程中执行的 JavaScript，您需要使用外部调试器并使用–inspect或–inspect-brk开关启动 Electron。
使用以下命令行开关之一启用主进程的调试：
命令行
--inspect=[port]
Electron 将在指定的 上侦听 V8 检查器协议消息port，外部调试器将需要在此端口上连接。默认port值为 5858.
electron --inspect=5858 your/app
--inspect-brk=[port]
跟 --inspect 一样，只不过会在js的第一行断点，暂停执行
外部
您将需要使用支持 V8 检查器协议的调试器。
chrome://inspect通过访问并选择检查已启动的 Electron 应用程序来连接 Chrome 。
已废弃
–remote-debugging-port=9222
移动端抓包工具实践
Fiddler
待更新
Charles
待更新
常见问题
1. Mac os （big sur 11.4） Safari （11.4.1）网页检查器调试只显示控制台 来源 审核菜单。
解决方法：safari版本有问题需要下载最新的预览版本 Safari Technology Preview
参考链接： Safari Web Inspector tabs are missing
2. Safari 远程调试移动端webview, 找不到 待调试页面
解决方法： 再次确认手机上的safari 高级设置中的网页检查器 是否开启。
如果已经开启，那就是原生打包的设置禁用了调试，在Build Settings 中Provisioning Profile中设置了xxx_dis发布版， 需要原生给你重新打包，将改设置修改为xxx_dev或者automatic, 重新安装， 就可以正常调试了。
3. chrome inspect 一直不出现设备。
解决方法： 一般由于网络原因引起，需要使用代理，可以访问google即可。
分享移动端真机调试几种方法(更新中)相关推荐
- 移动端真机调试，手机端调试，移动端调试
移动端真机调试方法 一.chrome真机调试:局限性:只能调试手机端的chrome浏览器,其他浏览器均不适用:优点是: 简单快捷: 二.spy-debugger调试:spy-debugger,安装稍微 ...
- 移动端真机调试--weinre
转载文章,主要是用来标记这个较为古老的h5调试工具 l移动端真机调试:spy-debugger调试教程 - SegmentFault 思否在window下安装:npm install s ...
- 移动端真机调试修改手机host
移动端真机调试修改手机host 一.电脑开热点 最简单方便快速修改手机host的方式 如果电脑是windows系统,可以通过电脑开热点,手机连接热点,修改电脑HOSTS文件.即通过修改电脑HOSTS文 ...
- XCode - 无法对iPhone真机调试的解决方法！
XCode - 无法对iPhone真机调试的解决方法! 参考文章: (1)XCode - 无法对iPhone真机调试的解决方法! (2)https://www.cnblogs.com/sunylat/ ...
- 移动端真机调试的两种方法
本文参考https://github.com/YvetteLau/Blog/issues/5 1.引入: 我们进行移动web开发时常常会接触到真机调试,但是手机端的浏览器却不想PC端这样有开发人员工具 ...
- 微信H5移动端真机调试--vConsole
在移动端实际开发中,还是会碰到一些棘手的bug,想看看到底哪里出了问题,苦于移动端不能F12啊.友好的微信给我们提供了这么一个入口,使开发者可以真机调试.给微信开发者点赞.然后就可以看到你打印的内容及 ...
- Flutter 新闻客户端 - 09 详情页展示、分享、远程真机调试
B站视频 https://www.bilibili.com/video/BV18e411s7A1 https://www.bilibili.com/video/BV1RZ4y1W7CN 本节目标 详情 ...
- iOS真机调试出错解决方法
以下为本人在iOS开发过程中真机调试时遇到过的几种报错,并附上相应的解决方法. 1.process launch failed:Security 原因: 未对应用程序授权. 解决方法: 需要给程序添加 ...
- 钉钉开发者工具真机调试时候一直加载中
项目场景: 企业内部应用(钉钉小程序) 问题描述 使用uniapp开发钉钉小程序,之前是正常的,后面真机调试时候一直转圈,也没有报任何错误 原因分析: 还没有找到头绪 解决方案: 试了很多方法不行,切 ...
最新文章
- mysql 必须安装php_非root模式下安装mysql php小记
- C++ Primer 5th笔记（chap 16 模板和泛型编程）模板特例化
- linux svn log 乱码,解决p42svn中文log乱码的问题
- Javascript基础（一）
- c2061 dword 语法错误_解决'PMIB_ICMP_EX':undeclared identifier
- 【python】如何查看已经安装的python软件包和版本
- 《机电传动控制》第六周学习笔记
- Java中unicode占几个,Java语言使用的是Unicode字符集，每个字符在内存中占8位。（)...
- [转]如何在Web页面上直接打开、编辑、创建Office文档
- 连续型随机变量及概率密度
- poj 1840(数的hah)
- Kali局域网断网攻击
- IE打印A4，表格缩小问题剖析
- javaScript用函数的方式实现闰年的判断：输入一个年份，判断是否是闰年（分析+代码）
- Python tkinter 学习笔记（2）-- 控件、组件（二）
- mac程序进程无法退出,强制退出后有重启了,怎么彻底解决?
- 德语的人称代词、物主代词变格宝典
- Teamtoken：管理员工在企业的数字资产
- Baumer工业相机堡盟工业相机中彩色工业相机和黑白工业相机像素格式的区别和优点以及行业应用
- python scrapy爬取HBS 汉堡南美航运公司柜号信息