如何在手机设备上实时调试

【背景】

1、移动开发使用Chrome模拟设备,但是和真实设备还是有一定出入的

2、QQ和微信使用的X5内核与Chrome的webkit内核有差异,经常遇到奇葩的bug,这种场景又比较多,一般很难定位

3、手机型号颇多,如果遇到某个设备有bug,怎么调试

4、开发环境下手机设备因域限制访问不到办公网络,访问不了开发或测试中的产品页面

【目的】

1、对于Dev、Fe可以在真实设备上实时调试,快速定位原因并解决(包括QQ、微信的内置浏览器)

2、对于QA、PM、UI可以在真实设备上测试办公网络中在开发或测试的项目

【方法】

1、安卓系列

a、手机开启USB调试并将手机通过USB连接PC

b、下载最新版QQ浏览器,安装 微信调试工具

c、手机安装微信,清除微信本地TBS内核,并重新安装本地TBS内核

d、开启PC的wifi,连接到Qunar热点,并登陆VPN

e、手机连接Qunar 热点,并将代理设置为PC的无线IP地址

f、PC开启Charles代理,端口设置8888

g、PC开启fekit server,端口默认为80

在微信中打开开发的产品地址,刷新PC端QQ浏览器,实时调试就开始了……

a、在PC的QQ浏览器中指定任意元素,手机自动响应,体验和PC上Chrome一模一样

b、修改本地代码,实时生效

2、IOS系列

a、开启本机wifi,连接到Qunar热点,并登陆VPN

b、手机连接Qunar 热点,并将代理设置为PC的无线IP

c、PC开启Charles代理,端口设置8888

d、PC开启fekit server,端口默认为80

IOS目前还无法做到体验和PC上Chrome一样;但可以修改本地代码后实时看到效果

【我是FE、Dev】

【我是QA、PM、UI】

【如何安装TBS内核】

参考:http://blog.qqbrowser.cc/start/

【如何查看PC的无线IP】

Windows:

cmd:ipconfig/all

Mac:

系统偏好设置》网络

【注意事项】

1、在微信调试插件中选择 “网页调试”,其次先在手机端微信打开页面,PC上再启动服务

2、本方法使用的工具只有VPN、笔记本、手机、Charles,Fekit(仅fe需要),按公司情况这些都是标配,PC上不再需要其他网络代理软件;

时间: 2024-10-12 10:34:13

如何在手机设备上实时调试的相关文章

手机设备上touchstart与click的区别

1.基本定义 touchstart 手指触碰开始就能触发 click 1.手指触碰 2.手指未在屏幕上移动 3.在这个dom上手指离开屏幕 4.触摸和离开屏幕之间的时间间隔较短 因此,click事件有其独特的地方,不能完全用touchstart替代. 2.click延时问题 因为手机浏览器上,两次轻触是放大操作,在第一次被轻触后,浏览器需要先等一段时间,检测是否有第二次连续触碰,才会触发click时间,click时间通常会延迟300ms左右. 解决方法:在touchstart和touchend时

手机设备上调试接口,查看错误信息

在微信小程序开发的时候,请求接口不成功,手机上未反馈任何消息,不方便调式,这时候就需要把错误信息打印出来 在请求接口错误函数中将obj转换成字符串,再用一个弹窗显示出来... 代码如下: fail: function(res) { wx.showToast({ title: JSON.stringify(res), icon: 'success', duration: 2000 }) } 其中res.errMsg存放的是请求出错的原因,如果请求成功存放的是ok

在 Android Studio 上实时调试数据库( SQLite )

安装 SQLScout 是一个 Android Studio 的插件,通过点击: Setting -> Plugings -> Browse Repositories 1 搜索 SQLScout 安装即可. 要是下载不动,可以到 这里 下载,然后点击 Install plugin from disk 导入. 加载 成功安装后重启 Android Studio,会发现右边的侧边栏出现了 SQLite Exporer,展开后点击「+」会出现三个选项:  Local SQLite Database

[转] 在安卓设备上使用 Chrome 远程调试功能

你的网页内容在移动设备上的体验可能和电脑上完全不同.Chrome DevTools 提供了远程调试功能,这让你可以在安卓设备上实时调试开发的内容. 安卓远程调试支持: 在浏览器选项卡中调试网站. 在原生安卓应用中调试网页内容. 将屏幕从你的安卓设备上投影到你的开发机器上. 使用端口转发和虚拟主机映射来让安卓设备访问开发使用的服务器. 需求 要开始远程调试,你需要: 安装 Chrome 32 或者之后的版本. 连接安卓设备用的 USB 线缆. 对于通过浏览器调试:安卓 4.0 以上并且安装了 Ch

android 手机设备唯一标识

唯一标识码这东西在网络应用中非常有用,例如检测是否重复注册之类的. [java] view plaincopy import android.provider.Settings.Secure; private String android_id = Secure.getString(getContext().getContentResolver(), Secure.ANDROID_ID); 我们在项目过程中或多或少会使用到设备的唯一识别码,我们希望能够得到一个稳定.可靠的设备唯一识别码.今天我们

如何在移动设备上调试网页

这篇文章所讲到的方法已经过时,请移步<移动端真机调试终极利器-BrowserSync>,欢迎分享更多工具. 手机端页面,大多运行在webkit内核的浏览器上,但还是会因平台.厂商的不同而有种种兼容性问题.下面就介绍一下在iOS和Android两个平台上如何在真机上对页面进行调试.这里要说明的是,iOS平台只能用自带的Safari浏览器来调试,而Android平台也只能用google Chrome浏览器来调试.当然,我目前只发现这么两种手段,如果你还有其他方法可调试更多的浏览器,希望你能留言告诉

从NDK在非Root手机上的调试原理探讨Android的安全机制(转载)

从NDK在非Root手机上的调试原理探讨Android的安全机制 最近都在忙着研究Android的安全攻防技术,好长一段时间没有写博客了,准备回归老本行中--Read the funcking android source code.这两天在看NDK文档的时候,看到一句话"Native debugging ... does not require root or privileged access, aslong as your application is debuggable".咦

XE6 &amp; IOS开发之免证书真机调试(3):生成iPA文件并安装到其它苹果设备上(有图有真相)

XE6 & IOS开发之免证书真机调试(3):生成iPA文件并安装到其它苹果设备上(有图有真相) 2014-08-27 20:51 网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 1.既然我们已经在真机上运行过App了,那么现在就来生成一下.--------------------------------------------------------------- 1.在虚拟机下,点一下桌面(星空图随便某个地方),在F

如何通过Chrome远程调试android设备上的Web网站

网上的帖子很多,但很多都是老版本的,试过了,根本不管用,花了一天时间,终于在本机试验通过了,特记录下来,以备用.有需要的朋友也可以参考.先上一张图,看看PC端chrome上调试的效果: 左边是手机的模拟操作器,右边是大家熟悉的开发人员工具,也可以在手机上操作,PC端左边屏幕会同步到手机上的界面. 下面再说一下环境配置: 1.手机端,我手机是华为荣耀4,android4.4.4,很旧的手机了,大家别笑话,但不影响本次试验.安装chrome版本为58.0.3029.83: 2.PC端,win7 64