移动端真机调试方法

最近要分析web页面,在安卓和ios上的性能差异,除了操作系统本身不同之外,应该还多地方要探究的,第一步就是要在真机上分析。所以总结一下几个方法。

1.Mac + +iPhone+ Lightning+Safari 浏览器

步骤:

1)用:Lighting线将mac与iphone相连

2)iphone打开Web检查器(设置->Safari->高级->Web检查器)

3)iphone用safari打开要进行分析的页面

4)mac打开safari浏览器(菜单->开发->对应的手机名称->要调试的页面),点击即进入Safari Developer Tools

5)可以见到的调试界面是这样的

缺点:不能调试webView里面的页面

2.安卓手机+安卓数据线+电脑

步骤:

1)用数据线将手机与电脑相连

2)手机开启use调试(安卓不同机型开启的步骤不尽相同,不知道的百度一下)

3)打开chrome,输入chrome://inspect/#devices,勾选Discover USB devices

4)用手机chrome打开要调试的网页(如果是其他webView页面,需要在app配置启动代码,详键官方教程)

5)选择你要调试的页面进入

6)可以见到是这样的调试界面

缺点:亲测,mac中调试界面与小米6手机的界面经常不同步,操作非常不方便,还好控制台还是能正常看东西

3.weinre

步骤:

1)可以直接npm install这个模块,然后启动,打开管理界面即可

2)直接安装whistle,自带了weinre。还可以代理不同环境,具体教程见:https://avwo.github.io/whistle/rules/weinre.html

缺点:可以说是极简主义了,步骤简单、调试简单、能调的也简单(就是查查元素,看看控制台,不能像chrome那些分析工具一样) 

时间: 2024-11-10 11:18:06

移动端真机调试方法的相关文章

移动端真机调试

移动端调试困难 很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机端的浏览器进行测试,这个时候,如果没有出现问题,皆大欢喜.但是一旦出现问题,我们就很难解决,因为缺乏可视化的界面.不似在PC端,我们能直观的去改变样式,或者是进行断点调试.有时,在移动端我们不得不借助于alert来调试,但是这样的调试方法效率极其低下,很多时候,都是靠经验,或者是靠排除法.甚至,我们不得不归结为是浏览器的实现问题. 解决策略 主要介绍三种调试方法,皆可行,至于选择哪一

web前端开发之移动端真机调试

---恢复内容开始--- 前言 在前端开发中,调试是不可缺少的环节,PC端很简单,但是随着移动端火起来,在手机上面测试就显得尤为重要. 在工作中本人也经过了一些测试,总结了如下几种方法. 1.Weinre 调试 2.UC开发者浏览器: 3.chrome真机调试 4.Safari开发者工具 5.Browsersync 在这5种调试方法中我推荐第5种,有兴趣的朋友可以逐一浏览. 一.使用 Weinre 调试 该方法是比较老的一种方法,对于其他的调试方法来说属于刀耕火种型的.weinre是一个调试包,

移动端真机调试大法

在日常项目中的开发中,接触移动端开发的小伙伴们免不了要和移动端调试打交道,本文特在此总结下常用的移动端调试,欢迎小伙伴补充. 谷歌浏览器 谷歌浏览器是我们前端开发中必不可少的利器,跳样式,打断点,看网络请求,看性能等,基本上你能想到的,谷歌都能满足你,在移动端调试方面也是一样,我们可以利用谷歌浏览器的手机模式,如下图, 点击这个右侧红框手机按钮,便可以切换为手机模式,同时我们还可以在左侧红框内点击下拉箭头,选择不同的手机模式,还可选择responsive模式自定义宽高. 与此同时,我们还可以自定

移动端真机调试终极利器-BrowserSync(使用方法)

1. 安装 Node.js BrowserSync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js 安装适用于Mac OS,Windows和Linux. 2. 安装 BrowserSync 您可以选择从Node.js的包管理(NPM)库中 安装BrowserSync.打开一个终端窗口,运行以下命令: npm install -g browser-sync 您告诉包管理器下载BrowserSync文件,并在全局下安装它们,您可以在所有项目(任

移动端真机调试抓包,fiddler web debugger

小白一枚,在公司大神指导下加之找了好多资料才勉强将fiddler的使用摸透,果然很好用. 一.设置手机 二.设置fiddler 原文地址:https://www.cnblogs.com/zhenchaojia/p/8303681.html

uni-app真机调试报错request:fail abort解决方法

Android端真机调试访问本地接口数据时报错:request:fail abort 报错代码 onLoad: function(e) { uni.request({ url: 'http://localhost:8088/api/Gift', method: 'GET', data: {}, success: (res) => { this.GiftInfo = res.data; }, fail: (fa) => { console.log(fa); } }) } 本地接口访问没有问题:

移动端真机调试工具

做移动开发大多数的时候跟手机界面打交道,也就是说你只能在电脑上开发写代码,最终效果是确是在另外一个终端看到的.虽然各种浏览器为开发者提供了很多模拟手机设备的功能,这些功能总体来说基本可以满足我们对于调试移动设备的需求,但是模拟毕竟是模拟,它不能真正做到实现真机一样的效果.经常遇到在chrome模拟器上样式显示正常,在手机上却出现样式错误的情况,在PC端模拟器运行正常,在真机上却报错的情况.所以,必须在想办法在真实的机子上测试我们的代码最终的执行效果.移动端真机调试有几个刚需:看log.看erro

移动开发真机调试

做移动开发大多数的时候跟手机界面打交道,也就是说你只能在电脑上开发写代码,最终效果是确是在另外一个终端看到的.虽然各种浏览器为开发者提供了很多模拟手机设备的功能,这些功能总体来说基本可以满足我们对于调试移动设备的需求,比如露珠在之前向诸位介绍的手机开发者模式.但是模拟毕竟是模拟,它不能真正做到实现真机一样的效果.所以,必须在想办法在真实的机子上测试我们的代码最终的执行效果.办法当然是有的,下面是露珠在开发过程中用到的若干真机调试方法: 一.使用 Weinre 调试 该方法是比较老的一种方法,对于

如何实用便捷的在本地真机调试WEB端HTML5网页

先简单介绍两款常用但需要一定条件或限制的工具 1.如果你能FQ chrome在32版本后就自带了移动端调度工具,可以在Android直接联调,但唯一遗憾的是,在我大天朝要FQ后才能行的通,我自己试了后公司好几个机器联不上… 2.如果你有苹果电脑和iphone 苹果电脑上的safari 6.0版本后就可以直接连接iphone手机调试手机版上safari正在浏览的web页面,前提是你得有个苹果电脑和iphone手机,但如果你是Android的话,就没办法了 符合前端B格的“小苹果” 自己在公司里也是