专栏首页前端Q移动端真机调试方法总结

移动端真机调试方法总结

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

Mac+iPhone+Lightning+Safari 浏览器

步骤:

  1. 用:Lighting线将mac与iphone相连
  2. iphone打开Web检查器(设置->Safari->高级->Web检查器)
  3. iphone用safari打开要进行分析的页面
  4. mac打开safari浏览器(菜单->开发->对应的手机名称->要调试的页面),点击即进入Safari Developer Tools,如图:
  1. 可以见到的调试界面是这样的

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

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

步骤:

  1. 用数据线将手机与电脑相连
  2. 手机开启use调试(安卓不同机型开启的步骤不尽相同,不知道的百度一下)
  3. 打开chrome,输入chrome://inspect/#devices,勾选Discover USB devices
  4. 用手机chrome打开要调试的网页(如果是其他webView页面,需要在app配置启动代码,详见官方教程)
  5. 选择你要调试的页面进入
  1. 可以见到是这样的调试界面

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

weinre

步骤:

  1. 可以直接npm install weinre,然后启动,打开管理界面即可
  2. 直接安装whistle,自带了weinre。还可以代理不同环境,具体教程见:https://avwo.github.io/whistle/rules/weinre.html

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

vConsole+whistle

步骤:

  1. 安装 whistle 后打开面板,在 value 中新建 vConsole.js,然后到 https://github.com/Tencent/vConsole/blob/dev/dist/vconsole.min.js 拷贝代码到 vConsole.js 中
  2. 写代理规则,如
https://baidu.com/ js://{vConsole.js}

这样在手机看,就会有个控制台出现,能看到 console.log 出来的东西,如图:

缺点:功能有限,无法看到dom结构等,只能看一些输出

本文分享自微信公众号 - 前端Q(luckyWinty),作者:winty

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue这些修饰符帮我节省20%的开发时间

    为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~

    winty
  • NPM命令实用使用技巧总结

    我们经常使用npm init来创建项目,并按照提示输入项目信息(项目名称、作者等),但是,如果我们并不关心项目信息,并且保留默认值,那么我们对 npm 请求的每...

    winty
  • Chrome DevTools 远程调试协议分析及实战

    Chrome DevTools 可以说是前端开发最常用的工具,无论是普通页面、移动端 webview、小程序、甚至 node 应用,都可以用它来调试。

    winty
  • [译]构建现代Web应用的安全指南

    原文:Security for building modern web apps 译者:杰微刊—张迪 这篇文章的灵感来自于另一篇文章,它是关于“在今天,构建We...

    逸鹏
  • 解决:Failed to execute goal org.apache.maven.plugins:maven-deploy-plugin:2.8.2:deploy (default-deploy)

    1. 执行 mvn clean deploy ... 想把 jar 包更新到私服仓库,报错:

    微风-- 轻许--
  • 针对某mysql批量提权工具的后门分析

    Windows小马下载地址三个......VBS执行脚本1个   linux小马下载地址连个.....

    周俊辉
  • 【GPLT】L1-018 大笨钟

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    喜欢ctrl的cxk
  • 基本设置

    网站提供登录、注册等用户认证功能是一个常见的需求。因此,Django 提供了一套功能完整的、灵活的、易于拓展的用户认证系统:django.contrib.aut...

    追梦人物
  • 【钱塘号专栏】“互联网+物流”的云与大数据

    随着“互联网+物流”的发展,物流大数据将成为普遍的事物,每一个物流要素都会产生大数据。而对大数据的掌控和处理,自然就需要有“云”这个基础设施。因而我们至少可以从...

    钱塘数据
  • 14年工作回顾(一)

    本文开始会把之前项目中遇到的一些问题进行分类整理,并得出其经验值。也许其本身在今天的技术架构中没有任何实用价值,但在项目开发中能有举一反三的作用。

    RobinsonZhang

扫码关注云+社区

领取腾讯云代金券