一些调试东西
提及手机端调试,比拟人人都不生疏。
因为手机浏览器没有像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-console
m-console 灵感来自livereload,livereload的完成应该是经由过程WebSocket来举行浏览器跟当地的通讯。页面中引入一个客户端版本的livereload.js文件,当当地文件修正被watch历程捕捉后,会关照livereload的WebSocket效劳器,效劳器关照客户端文件已更新,浏览器中引入的文件监听到此次更新,则挪用window.location.reload完成浏览器革新。
那末,明显我们能用Websocket来做长途调试,关照手机端关照浏览器打印log。
道理以下:
开启一个WebSocket作为效劳端。
在浏览器中引入一个剧本用于衔接效劳端。
当推断在手机端接见时,重写console要领,发送log到效劳端。
效劳端接收到手机发来的音讯,把音讯播送给一切客户端。
客户端监听效劳端,将音讯打印出来。
详细完成可检察代码,该敕令行东西有以下特性:
直接将信息打印到PC浏览器的调试东西的console面板,没必要开启别的的打印页面。
支撑一切console范例,支撑js报错打印。
当地开启效劳器,打印速率比较快。
运用简朴,只需一个敕令。