摘要：一些调试工具说起手机端调试，相比大家都不陌生。能对手机进行远程调试，能操作，打印输出等。通过使用实现本地与远程调试器的通信。安装各种虚拟机在电脑上进行手机调试。服务端接收到手机发来的消息，把消息广播给所有客户端。
一些调试工具
说起手机端调试，相比大家都不陌生。
由于手机浏览器没有像PC端浏览器一样有开发调试工具，所以一般手机端的调试都要借助于电脑，现在的调试方式通常有以下几种。
直接在chrome, firefox等开启模拟器调试
简单直接，还能模拟网络等，但是仍然无法100%还原手机的真实情况。
实现一套pc调试面板
采用这种实现方式有weinre，weinre很早前就比较流行了，使用也比较广泛，运行后会在PC上生成一个像chrome开发工具一样的调试器。能对手机进行远程调试，能操作DOM，打印console输出等。
通过与远程服务器通信，传递打印消息
比较流行的有jsconsole，它是在远程部署一个服务器，并生成一个具有唯一标识远程文件给本地调用，本地嵌入该文件后，会在页面上生成一个iframe。通过使用postMessage实现本地与远程调试器的通信。调试的时候可以在远程页面上打印console输出。
直接将调试信息输出在手机屏幕上
这种实现方式的也比较多，如js-mobile-console，还有微信的vConsole。
安装各种虚拟机sdk, 在电脑上进行手机调试。
chrome上可以设置远程调试功能，手机使用数据线连接电脑。
优缺点分析以上这些方法在开发中都尝试过了，各有各的优缺点。
chrome模拟器最为方便，然而模拟器和真是机器还是经常有很多差别的，有时候模拟器运行正常，到真机上就懵逼了。
weinre安装和开启会比较繁琐，PC和手机同时调试的时候需要关注两个调试面板，效率不是很高。
jsconsole这种调试没有提供DOM的操作，只是单纯的进行log输出，然而实际使用中需要使用到DOM操作的比较少，大部分的工作都可以通过模拟器来完成，如果手机上显示稍有不同，只要更改代码，自动刷新查看效果就可以了，真正需要的功能是打印出手机上值。而个人认为jsconsole的缺点就是需要跟远程地址通信，打印速度受到一定影响，在需要测试scroll等的输出时会打印不及时。而且需要另外开启一个tab查看打印信息。
直接将信息输出到屏幕上应该是最简单粗暴的方法，但是需要在手机这么小的屏幕上打印信息，信息会挡住操作元素不说，就是查看复杂数据结构的log也很不方便。个人认为这种不太实用。
电脑上安装手机虚拟机就不多说了，虽能比较真实模拟手机，但是安装繁琐，操作不方便，无法模拟真实的手势操作。
chrome的远程调试弊端也比较明显，导致使用的人并不多。首先是需要连接数据线，其次是设置比较繁琐，而且还限制了android手机。对于IOS的调试则可能要使用Safari的另一套工具。
一般开发中手机的远程调试不是强需求，除非遇到一些手机上的奇葩bug, 比如浏览器引擎对js的实现方式差异，需要打印真实数据，chrome模拟器都可以解决90%的问题。
但是每当遇到这种问题时，我还是会纠结到底使用哪个工具来做调试。原因很简单，我只是想把手机的信息打印到电脑浏览器上，不想打断PC端的调试，不想开启其他附属功能，仅此而已。因此我自己写了一个手机端打印的命令行工具，功能和实现都比较简单。
小而简单的工具 m-consolem-console 灵感来自livereload，livereload的实现应该是通过WebSocket来进行浏览器跟本地的通信。页面中引入一个客户端版本的livereload.js文件，当本地文件修改被watch进程捕获后，会通知livereload的WebSocket服务器，服务器通知客户端文件已更新，浏览器中引入的文件监听到这次更新，则调用window.location.reload实现浏览器刷新。
那么，显然我们能用Websocket来做远程调试，通知手机端通知浏览器打印log。
原理如下：
开启一个WebSocket作为服务端。
在浏览器中引入一个脚本用于连接服务端。
当判断在手机端访问时，重写console方法，发送log到服务端。
服务端接收到手机发来的消息，把消息广播给所有客户端。
客户端监听服务端，将消息打印出来。
具体实现可查看代码，该命令行工具有以下特点：
直接将信息打印到PC浏览器的调试工具的console面板，不必开启另外的打印页面。
支持所有console类型，支持js报错打印。
本地开启服务器，打印速度比较快。
使用简单，只需一个命令。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/79515.html
摘要：如何使用是的缩写，可以远程调试页面。安装配置获取本机开启本地监听服务器浏览器打开效果如下将这段脚本放在需要调试的手机页面中就可以远程调试了，加载好之后就可以在下找到需要调试的页面了，和类似，也可以查看元素和控制台等。 调试移动端页面，优先选择使用chrome浏览器调试，如果是hybrid形式的页面，可以使用chrome提供的chrome://inspect/#devices 安卓真机调...
摘要：如何使用是的缩写，可以远程调试页面。安装配置获取本机开启本地监听服务器浏览器打开效果如下将这段脚本放在需要调试的手机页面中就可以远程调试了，加载好之后就可以在下找到需要调试的页面了，和类似，也可以查看元素和控制台等。 调试移动端页面，优先选择使用chrome浏览器调试，如果是hybrid形式的页面，可以使用chrome提供的chrome://inspect/#devices 安卓真机调...
摘要：如何使用是的缩写，可以远程调试页面。安装配置获取本机开启本地监听服务器浏览器打开效果如下将这段脚本放在需要调试的手机页面中就可以远程调试了，加载好之后就可以在下找到需要调试的页面了，和类似，也可以查看元素和控制台等。 调试移动端页面，优先选择使用chrome浏览器调试，如果是hybrid形式的页面，可以使用chrome提供的chrome://inspect/#devices 安卓真机调...
阅读 877·2021-10-13 09:39
阅读 3530·2021-09-26 10:16
阅读 2860·2019-08-30 15:54
阅读 1037·2019-08-30 14:22
阅读 2885·2019-08-29 15:39
阅读 3252·2019-08-27 10:52
阅读 809·2019-08-26 13:59
阅读 1702·2019-08-26 12:20
