【Golang语言社区】前端编程-手机端调试利器 - 总结与实践

一些调试工具

说起手机端调试,相比大家都不陌生。

由于手机浏览器没有像PC端浏览器一样有开发调试工具,所以一般手机端的调试都要借助于电脑,现在的调试方式通常有以下几种。

  1. 直接在chrome, firefox等开启模拟器调试简单直接,还能模拟网络等,但是仍然无法100%还原手机的真实情况。
  2. 实现一套pc调试面板 采用这种实现方式有weinre,weinre很早前就比较流行了,使用也比较广泛,运行后会在PC上生成一个像chrome开发工具一样的调试器。能对手机进行远程调试,能操作DOM,打印console输出等。
  3. 通过与远程服务器通信,传递打印消息 比较流行的有jsconsole,它是在远程部署一个服务器,并生成一个具有唯一标识远程文件给本地调用,本地嵌入该文件后,会在页面上生成一个iframe。通过使用postMessage实现本地与远程调试器的通信。调试的时候可以在远程页面上打印console输出。
  4. 直接将调试信息输出在手机屏幕上 这种实现方式的也比较多,如js-mobile-console,还有微信的vConsole
  5. 安装各种虚拟机sdk, 在电脑上进行手机调试。
  6. chrome上可以设置远程调试功能,手机使用数据线连接电脑。

优缺点分析

以上这些方法在开发中都尝试过了,各有各的优缺点。

  1. chrome模拟器最为方便,然而模拟器和真是机器还是经常有很多差别的,有时候模拟器运行正常,到真机上就懵逼了。
  2. weinre安装和开启会比较繁琐,PC和手机同时调试的时候需要关注两个调试面板,效率不是很高。
  3. jsconsole这种调试没有提供DOM的操作,只是单纯的进行log输出,然而实际使用中需要使用到DOM操作的比较少,大部分的工作都可以通过模拟器来完成,如果手机上显示稍有不同,只要更改代码,自动刷新查看效果就可以了,真正需要的功能是打印出手机上值。而个人认为jsconsole的缺点就是需要跟远程地址通信,打印速度受到一定影响,在需要测试scroll等的输出时会打印不及时。而且需要另外开启一个tab查看打印信息。
  4. 直接将信息输出到屏幕上应该是最简单粗暴的方法,但是需要在手机这么小的屏幕上打印信息,信息会挡住操作元素不说,就是查看复杂数据结构的log也很不方便。个人认为这种不太实用。
  5. 电脑上安装手机虚拟机就不多说了,虽能比较真实模拟手机,但是安装繁琐,操作不方便,无法模拟真实的手势操作。
  6. chrome的远程调试弊端也比较明显,导致使用的人并不多。首先是需要连接数据线,其次是设置比较繁琐,而且还限制了android手机。对于IOS的调试则可能要使用Safari的另一套工具。

一般开发中手机的远程调试不是强需求,除非遇到一些手机上的奇葩bug, 比如浏览器引擎对js的实现方式差异,需要打印真实数据,chrome模拟器都可以解决90%的问题。

但是每当遇到这种问题时,我还是会纠结到底使用哪个工具来做调试。原因很简单,我只是想把手机的信息打印到电脑浏览器上,不想打断PC端的调试,不想开启其他附属功能,仅此而已。因此我自己写了一个手机端打印的命令行工具,功能和实现都比较简单。

小而简单的工具 m-console

m-console 灵感来自livereload,livereload的实现应该是通过WebSocket来进行浏览器跟本地的通信。页面中引入一个客户端版本的livereload.js文件,当本地文件修改被watch进程捕获后,会通知livereload的WebSocket服务器,服务器通知客户端文件已更新,浏览器中引入的文件监听到这次更新,则调用window.location.reload实现浏览器刷新。

那么,显然我们能用Websocket来做远程调试,通知手机端通知浏览器打印log。

原理如下:

  1. 开启一个WebSocket作为服务端。
  2. 在浏览器中引入一个脚本用于连接服务端。
  3. 当判断在手机端访问时,重写console方法,发送log到服务端。
  4. 服务端接收到手机发来的消息,把消息广播给所有客户端。
  5. 客户端监听服务端,将消息打印出来。

具体实现可查看代码,该命令行工具有以下特点:

  1. 直接将信息打印到PC浏览器的调试工具的console面板,不必开启另外的打印页面。
  2. 支持所有console类型,支持js报错打印。
  3. 本地开启服务器,打印速度比较快。
  4. 使用简单,只需一个命令。

文章网址:https://segmentfault.com/u/fwon

原文发布于微信公众号 - Golang语言社区(Golangweb)

原文发表时间:2017-05-28

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏微信小程序开发

你真的了解小程序的自定义编译功能嘛?

微信开发者工具最新的版本里面已经校验了app.json里面的重复pages,之前可以直接把你想要的page放在第一行,默认就会先加载这个page,现在只能通过自...

61710
来自专栏FreeBuf

WPScan使用完整攻略:如何对WordPress站点进行安全测试

WPScan是Kali Linux默认自带的一款漏洞扫描工具,它采用PHP编写,能够扫描WordPress网站中的多种安全漏洞,其中包括主题漏洞、插件漏洞和Wo...

2380
来自专栏Java后端生活

Linux(十五)进程管理

2528
来自专栏java一日一条

理解 Linux/Unix 登录脚本

不知道你有没有遇到过这样的场景,当你需要设置一个环境变量,或者运行一个程序设置你的shell或桌面环境,但是不知道在哪里是最方便设置的位置。

1221
来自专栏从零开始学自动化测试

Fiddler抓包3-查看get与post请求

前言 前面两篇关于Fiddler抓包的一些基本配置,配置完之后就可以抓到我们想要的数据了,接下来就是如何去分析这些数据。 本篇以博客园的请求为例,简单分析get...

4046
来自专栏SpringBoot 核心技术

第十四章:QueryDSL与SpringDataJPA共同服务于SpringBoot

3844
来自专栏向治洪

Android Studio环境下搭建ReactNative

1.安装Android Studio 首先肯定是 安装Android Studio(包含SDK)(国内推荐) ps:这里有一点要注意,需要为SDK配置环境变量,...

2018
来自专栏PHP在线

HTTP/2 服务器推送(Server Push)

HTTP/2 协议的主要目的是提高网页性能。 头信息(header)原来是直接传输文本,现在是压缩后传输。原来是同一个 TCP 连接里面,上一个回应(respo...

3586
来自专栏代码散人

利用XCode Targets创建多scheme的iOS项目

在我们的开发iOS的时候,通常会遇到一个项目打包成多个环境的问题,也会遇到一套代码打包成多个项目的问题,最常用的做法是写一个配置文件,在打包的时候修改一下配置文...

1344
来自专栏古时的风筝

django开发个人简易Blog—nginx+uwsgin+django1.6+mysql 部署到CentOS6.5

前面说完了此项目的创建及数据模型设计的过程。如果未看过,可以到这里查看,并且项目源码已经放大到github上,可以去这里下载。 代码也已经部署到sina sea...

2949

扫码关注云+社区

领取腾讯云代金券