前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >原 如何调试移动端页面

原 如何调试移动端页面

作者头像
jojo
发布2018-06-06 15:14:52
2.2K3
发布2018-06-06 15:14:52
举报
文章被收录于专栏:jojo的技术小屋

作者:汪娇娇

时间:2018年6月2日

之前一段时间过于忙碌,积压了很多博客,现在慢慢来还债啦~~

大家都知道,挂在PC端上的页面一旦出现问题,是比较容易进行调试的,只要下载对应的浏览器,打开控制台,打断点或直接看一下出问题的点,一般都能很快查出问题。但一旦移动端页面出现问题,尤其市面上安卓那么多机型,出了问题,连个调试方法都没有。那么,下面就给大家介绍一下我使用的一些调试方法吧。

一、Chrome DevTools

1、用数据线将电脑和手机连接起来;

2、打开手机的开发者模式 + USB 调试接口;

3、在浏览器上打开网址:chrome://inspect#devices

然后点开抓取到的网页就可以开始调试啦~~~

二、Mac Safari + iOS Safari

1、打开iphone手机的开发者模式,流程:【设置】->【Safari浏览器】->【高级】-> 开启【Web检查器】

2、打开Mac上Safari的开发者模式,流程:【Safari】->【偏好设置】->【高级】->【在菜单栏中显示“开发”菜单】勾选

3、用数据线将iphone手机和mac连接起来,在电脑的safari中按照流程执行:【开发】->【手机名称】->【正在调试的网站】

比如我在iphone手机Safari上打开了百度的网址:

然后按照调试pc端页面的思路来调试移动端页面就可以啦~~~

三、Charles

这个是抓包工具,可以抓取 request 和 response 数据。没办法像上面2种方法可以获取页面结构,主要用来获取数据、修改数据、模拟网络情况等(主要是测试用途)。

以Mac和iOS为例:

1、在电脑上下载 Charles:https://www.charlesproxy.com/download/

2、电脑和手机连接同一个无线网(这个很重要)。

3、在电脑端的 Charles 上按以下步骤找到代理服务器地址和端口号:

比如服务器地址是:192.168.1.105。

端口号是:8888。

4、在手机上配置代理:【设置】->【点击和电脑连接的同一个wifi最右边的蓝色i】->【配置代理】->【选择手动,配置服务器和端口】 

5、然后在手机浏览器输入以下网址安装证书:chls.pro/ssl

安装好之后还需要配置一下证书的信任:【设置】->【通用】->【关于本机】->【证书信任设置】->【将刚刚装上的证书打开信任】

然后打开手机上的任何页面就可以在Charles上抓包啦~~

如果有过滤网络请求的需要,可以做如下设置:

在 Charles 的菜单栏选择 【Proxy】–>【Recording Settings】,然后选择 include 栏,选择添加一个项目,然后填入需要监控的协议,主机地址和端口号就可以啦。

其他功能可以参考这篇文章:charles使用教程

四、微信开发者工具

微信开发者工具对微信公众号里的页面测试还是很方便的,比如测试微信分享功能等,对于一般的浏览器页面用前面介绍得到几种方法其实就足够了。

微信开发者工具下载地址:

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

微信开发者工具不仅支持url调试,也能对安卓手机进行远程调试,目前最新版还不支持iOS远程调试,打开设备监视面板:

打开后看到如下界面,可以看到有一台华为设备已经连接,远程调试要注意两点:

1、手机和电脑使用USB连接,手机要开启USB调试模式(不同手机不一样)。

2、手机上安装最新版谷歌浏览器并打开。

然后点击inspect即可开始调试当前手机谷歌浏览器打开的页面:

五、Eruda

前几种方法其实都是在PC端对移动端远程调试,当你遇到PC端调试和手机上运行不一致的情况时(其实大部分都是这种情况,哈哈哈),就可以用 Eruda 调试,Eruda 可以让你直接在手机上看控制台,打log,也是很方便的嘞。

已经有人写了一篇很好的博客,大家直接去看就行:https://www.oschina.net/p/eruda

结束语

好啦,暂时就写这5种方法吧,其实还有其他方法,就等大家自己去探究吧,比如 xcode 等。

方法多种,可以独立用,也可以混着用,彰显你你功力的时候就到了?。

这篇文章也是写了一个下午和一个晚上,没想到真的挺费劲,一边操作一边截图一边写,下一篇文章就等我先缓缓吧,哈哈哈哈

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、Chrome DevTools
  • 二、Mac Safari + iOS Safari
  • 三、Charles
  • 四、微信开发者工具
  • 五、Eruda
  • 结束语
相关产品与服务
云开发 CLI 工具
云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档