資訊專欄INFORMATION COLUMN
摘要：一些調試工具說起手機端調試，相比大家都不陌生。能對手機進行遠程調試，能操作，打印輸出等。通過使用實現本地與遠程調試器的通信。安裝各種虛擬機在電腦上進行手機調試。服務端接收到手機發來的消息，把消息廣播給所有客戶端。
一些調試工具
說起手機端調試，相比大家都不陌生。
由于手機瀏覽器沒有像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報錯打印。
本地開啟服務器，打印速度比較快。
使用簡單，只需一個命令。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79515.html
摘要：如何使用是的縮寫，可以遠程調試頁面。安裝配置獲取本機開啟本地監聽服務器瀏覽器打開效果如下將這段腳本放在需要調試的手機頁面中就可以遠程調試了，加載好之后就可以在下找到需要調試的頁面了，和類似，也可以查看元素和控制臺等。 調試移動端頁面，優先選擇使用chrome瀏覽器調試，如果是hybrid形式的頁面，可以使用chrome提供的chrome://inspect/#devices 安卓真機調...
摘要：如何使用是的縮寫，可以遠程調試頁面。安裝配置獲取本機開啟本地監聽服務器瀏覽器打開效果如下將這段腳本放在需要調試的手機頁面中就可以遠程調試了，加載好之后就可以在下找到需要調試的頁面了，和類似，也可以查看元素和控制臺等。 調試移動端頁面，優先選擇使用chrome瀏覽器調試，如果是hybrid形式的頁面，可以使用chrome提供的chrome://inspect/#devices 安卓真機調...
摘要：如何使用是的縮寫，可以遠程調試頁面。安裝配置獲取本機開啟本地監聽服務器瀏覽器打開效果如下將這段腳本放在需要調試的手機頁面中就可以遠程調試了，加載好之后就可以在下找到需要調試的頁面了，和類似，也可以查看元素和控制臺等。 調試移動端頁面，優先選擇使用chrome瀏覽器調試，如果是hybrid形式的頁面，可以使用chrome提供的chrome://inspect/#devices 安卓真機調...
閱讀 891·2021-10-13 09:39
閱讀 3542·2021-09-26 10:16
閱讀 2895·2019-08-30 15:54
閱讀 1054·2019-08-30 14:22
閱讀 2897·2019-08-29 15:39
閱讀 3266·2019-08-27 10:52
閱讀 819·2019-08-26 13:59
閱讀 1719·2019-08-26 12:20
