阅读 6454

移动端网页调试

banner

自2019.05.22日离职以来,自己在家浪了两天。然后发现,浪也该浪够了,该收心找下工作了。于是屁颠屁颠的拿起了《在你身边 为你设计》这本书看了一下午,看到移动端调试这里,略有感受,于是提取了下内容。

还有还有,有哪位大佬推荐下前端开发的工作吗,base广州啊,不胜感激~关于我请戳blog下的resume.png😄

在这个5g到来的时代,移动互联网继续横行,前端的开发工作和移动端更加紧密了,但是移动端调试着实让人尴尬。化解尴尬的方法介绍下下面这几种,有补充的欢迎留言👏

使用Chrome Develop Tool调试

作为一个前端开发工程师,没下载个谷歌浏览器都不好意思说自己是混这行的了。在移动开发的过程中,我们是可以使用桌面浏览器(推荐谷歌)进行调试的。尽管移动端网页与桌面端网页有诸多差异,但是说到底它还是一个在浏览器里浏览的HTML网页,所以最常用的还是在桌面借助Chrome调试器。

Chrome自带的Developer Tool对于调试移动端网页来说非常方便,可以通过调整下表所示的几个属性来调整页面。

属性名 功能
User Agent 设置当前模拟设备的用户代理(UA)
Device metrices 设置页面的大小,默认值是模拟设置的大小
Emulate touch events 模拟触摸屏事件
Fit in window 页面大小是否会根据窗口大小进行适配

优点:无须额外的成本,方便快捷。

缺点:仅仅用来模拟,并不能完全代表移动设备的真实状况。

使用IOS Safari + Mac OS Safari配合调试

这个方法对用MAC来办公的伙伴就比较友好了~

Apple允许开发者通过数据线连接的方式,在Mac OS的Safari里面调试iOS设备上的网页。但是这种方法在使用前,需要简单设置以下内容:

  • 在iOS设备上,打开Safari的Web检查器,选择设置 -> Safari -> 高级 -> Web检查器命令。(用到JavaScript的话,顺便在Web检查器同级上开启吧)
  • 在计算机上的Safari启用开发菜单,选择偏好设置 -> 高级 -> 在菜单栏中显示'开发'菜单命令。

当需要调试手机页面的时候,将设备与计算机通过数据线连接后,在Safari菜单开发栏下选择当前手机运行的页面即可。

优点:可以完全在真机设备上调试网页,无论是HTML和CSS,还是脚本和请求,都和在桌面浏览器一样,最重要的是当前调试的是在真实环境下的页面。

缺点:必须是iOS + Mac OS的组合,只能调试iOS设备的页面,不适用于Andriod设备。

使用Android Chrome + 桌面Chrome配合调试

嗯~Apple那么强势,我安卓表示不服,也要来自己的一套。

Google Chrome DevTools通过USB数据线直接调试手机上的网页。

只需要准备下面几个步骤:

  • 在Andriod"开发者"选项里打开USB调试模式。
  • 插上USB数据线。
  • 在Chrome菜单里选择"工具"选项,继续选择检查设备选项,即可列出所有连接的设备。

优点:简单、跨平台

缺点:只支持Android 4+

使用Weinre远程调试

Weinre的github仓库地址是github.com/nupthale/we…,在其README.md里面有详细的介绍。

Weinre来源于Web Inspector Remote,是一个远程页面调试工具,功能和Firebug、WebKit Inspector类似,可以帮助我们在PC端远程调试运行在移动设备浏览器内的Web页面或应用,能够即时调试DOM元素、CSS样式和JavaScript等。

Weinre为了能够同步桌面的调试客户端和移动设备上的调试目的,需要你搭建一个调试服务器(Debug Server),通过这台调试服务器,可以在调试目标(Debug Target)和桌面调试客户端(Debug Client)之间建立一个同步的连接。详细的搭建见Weinre仓库的README.md介绍。囧,步骤有点多,不想码字了😳

优点:同时支持iOS设备和Android设备,并且能直接对手机上的页面进行调试,无须安装客户端。

缺点:需要对HTML页面有改动的权限,因为是远程连接的原因,可能网络连接速度会影响调试的响应。

当看到优点是不是很激动,在真机上可以调试iOS和Android设备的网页耶✌️

使用vConsole调试

由腾讯出品的vConsole调试工具,在调试移动端的时候非常有效,而且其使用方法也是简单。

<script src="path/to/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script>
复制代码

上面的使用方法介绍了其中一种而已。当然了,引入的vConsole也要看下环境啊,线上环境的时候还是要判断下的,别等到上线的时候忘记移除vConsole了,被怼就尴尬😅。

优点:使用简单,能方便查看所需调试的面板信息

缺点:不支持UI的调试

后话

嗯,调试工具各有千秋,还有调试工具但是未介绍到的有Charles抓包工具,postman接口调试工具等。

哈哈哈,有哪位大佬推荐下前端开发的岗位吗?base广州,关于我请戳blog下的resume.png

qiaoba

参考

关注下面的标签,发现更多相似文章
评论