移动端真机调试,手机端调试,移动端调试
移动端真机调试方法
一、chrome真机调试:局限性:只能调试手机端的chrome浏览器,其他浏览器均不适用;优点是: 简单快捷;
二、spy-debugger调试:spy-debugger,安装稍微复杂一点,spy-debugger集成了weinre,不过还增加了抓包工具,使用最为方便;
一、chrome真机调试
1、手机端下载好chrome浏览器;
2、使用USB连接到PC,打开手机的USB调试模式;(也可以再谷歌拓展程序里面下载,inspect device)
3、然后在PC端打开chrome浏览器,在地址栏输入:chrome://inspect 勾选"discovery usb device";
4、打开应用程序,然后在手机端浏览网页,就可以看到如下的页面,点击inspect,进行调试;
注意:如果遇到无法调试的情况,可以重新打开手机的USB调试选项;
注意:如果网络加了域的,因为并不能使用这个方式,可以考虑使用另外两种调试方式;
二、 spy-debugger真机调试
Spy-debugger内部集成了weinre,通过代理的方式拦截所有html自动注入weinre所需的js代码。简化了weinre需要给每个调试的页面添加js代码。spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码。让页面调试更加方便;
特性:
页面调试+抓包
操作简单
支持HTTPS。
spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。
自动忽略原生App发起的https请求,只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。
可以配合其它代理工具一起使用(默认使用AnyProxy)
Spydebugger安装与使用
全局安装:
npm install –g spy-debugger
启动:
spy-debugger
重要:设置手机的HTTP代理,同一个局域网,以及代理设置;
代理的地址为PC的IP地址,代理的端口为spy-debugger的启动端口(默认端口为:9888);
如果要指定端口:spy-debugger-p1002
Android设置步骤:设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动 - 设置ip和端口号(对应自己启动的,参考下图)。
iOS设置代理步骤:设置 - 无线局域网 - 选中网络 - HTTP代理手动。
手机安装证书(node-mitmproxy CA根证书):
第一步:生成证书
生成CA根证书,根证书生成在电脑目录: /Users/XXX/node-mitmproxy/ 目录下(Mac)。
spy-debugger initCA
第二步:安装证书
把node-mitmproxy文件夹下的 node-mitmproxy.ca.crt 传到手机上,点击安装即可;
第三步:查看
Spy-debugger启动界面,同样,在手机端刷新页面之后,targets中会有记录;
三、移动端调试
可以看到你打印的内容及其他的信息,比如cookie、LocalStorage,Network、Element等;
微信打开这个网址 http://debugx5.qq.com/
扫二维码也可以
进去后,选择中间“信息”,然后一直往下翻,把vConsole打开,把下面两个Content Cache关掉;
然后打开你要调试的页面,你就你能看到右下角有个绿色按钮vConsole;点击就能查看你代码中console的内容了;
四、vConsole的使用
https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md
移动端真机调试,手机端调试,移动端调试相关推荐
- html5多屏互动游戏,多屏互动 —— 手机端与PC端 网页互动的现有尝试及设想
不可否认,多屏时代已经到来. 手机/平板/笔记本/PC/TV等,多个显示平台的逐步构建,为信息传播及交互提供了多重平台及体验选择. 素材:多屏自适应网页设计/多屏延生设计 在此篇文章,取手机端与PC端 ...
- 移动端真机调试--weinre
转载文章,主要是用来标记这个较为古老的h5调试工具 l移动端真机调试:spy-debugger调试教程 - SegmentFault 思否在window下安装:npm install s ...
- 分享移动端真机调试几种方法(更新中)
最新更新请参考移动端真机调试 文章目录 安卓 浏览器场景 X5内核类 IOS windows调试ios MAC调试ios 跨平台通通用JS 注入类 Vconsole Eruda weinre 拓展 E ...
- 【工具】PC端调试手机端 Html 页面的工具
一.概述 有一个项目需要在手机端显示一个 web 页面,而每次把应用 launch 后,从手机端看比较麻烦,因此搜罗了几种在 PC 端调试手机端页面的工具. 二.工具 http://fonkie.it ...
- ESP8266模块手机端和电脑端网络调试助手
ESP8266模块手机端和电脑端网络调试助手 使用方法比较简单,如下界面所示: 电脑端:确定"协议类型","IP地址"和"端口",然后点击连 ...
- 移动端真机调试修改手机host
移动端真机调试修改手机host 一.电脑开热点 最简单方便快速修改手机host的方式 如果电脑是windows系统,可以通过电脑开热点,手机连接热点,修改电脑HOSTS文件.即通过修改电脑HOSTS文 ...
- 移动端真机调试:chrome://inspect/#devices打开inspect后出现空白页
问题详细 我已经配置好了usb调试: 但是当我inspect的时候,加载不了:非常自闭 问题原因 Chrome调试手机端其实是去访问那个网站,为什么要去访问那个网址呢?而不是提供本地的解决方案?我猜想 ...
- chrome浏览器调试手机端h5页面
这个是常识性的问题了.奈何我之前确实是不知道.只知道用F12来调试PC端的页面,这次经过同事指点,终于知道为啥人家在浏览器调试手机端页面,显示的大小都是手机端的. 步骤: 1.打开F12 2.如果所示 ...
- 如何使用edge浏览器或chrome谷歌浏览器调试手机端网页(微信网页、浏览器皆可)
如何使用edge浏览器或chrome谷歌浏览器调试手机端网页(微信网页.浏览器皆可) 1.打开开发者选项中的USB调试功能(狂点"关于手机"中的版本号,然后返回到系统设置中就能看到 ...
最新文章
- PostgreSQL从继承到分区(三)
- column命令+pagesize命令+linesize命令+ttitle命令+btitle命令+break命令/comput命令
- 内嵌Tomcat的Connector对象的静态代码块
- Task.Factory.StartNew 和 Task.Run 到底有什么区别?
- Oil Deposit
- 移动端适配(必须要知道的,亲测有效)
- python基础(12)之匿名函数lambda
- SQL查询字段约束名的语句
- GBDT算法原理以及实例理解
- sqlmap的简单使用(sql注入)
- adb 切换默认桌面,OPPO默认桌面替换教程
- js提取字符串中数字的三种方法
- 数据分析-美国小孩英文名分析-可视化(含代码)
- flowchart流程图编程语言下载_flowchart.net
- Chrome打包扩展程序错误,清单文件缺失或不可读
- 天龙八部手游服务器找不到了,为什么天龙八部手游同样版本,区跟服务器都会 – 手机爱问...
- 注册交管12123服务器异常,交管12123提示服务异常怎么解决
- 怎么撤销定时说说_怎么取消手机qq定时说说
- 80386的寄存器组成
- Python pact契约测试实战