怎麼在移動端調試web前端?

01-02

剛才被誤刪了，再多寫點文字重發一下，這裡我總結了各種遠程真機調試方法，並且會隨著技術的進步逐步更新：

https://github.com/jieyou/remote_inspect_web_on_real_device

上面列了chrome瀏覽器模擬、調試安卓上的UC、安卓上的chrome、weinre、調試ios上的safari等方法

自薦一篇文章移動端前端調試

特別推薦 BrowserSync 這個工具 http://yujiangshui.com/multidevice-frontend-debug/#toc-2

打個廣告，剛寫的移動端console：GitHub - liriliri/eruda: Console for mobile JavaScript

只要嵌入一個js文件就可以查看手機webview的一些基本信息，window.onerror捕獲頁面全局錯誤。

日常開發中，用 Chrome 模擬 UA、屏幕尺寸和觸摸特性，完成第一階段的開發和調試。

第二階段：

iOS 的話，iPhoen 數據線鏈接 Mac，打開 Safari 就可以直接使用 Mac 的 Safari 調試工具了。

Android 的話，Chrome 也有提供對應的調試工具。

插件鏈接：https://chrome.google.com/webstore/detail/dpngiggdglpdnjdoaefidgiigpemgage

國產瀏覽器中，UC 在 Android 提供了開發者版本，區域網下直接訪問機器的IP + 9998埠即可進入調試環境。

但對於國內開發者而言，最大的問題在於國產瀏覽器的各種奇怪BUG。

面對這類沒有調試工具的瀏覽器，weinre 也是一個可行的解決方案。

關於這些，@悠悠的回答已經十分全面了。

如果只是對JavaScript的異常進行跟蹤，自己敲幾行代碼也可以勉強處理一下。

引入一個外部鏈接來接收異常信息，藉此把異常顯示到開發環境中，這樣就可以根據異常的信息對 JavaScript 代碼進行跟蹤和定位。

其中大致的實現原理，是通過對 window.onerror 進行一個全局的異常監聽，把捕獲到的異常發送到指定的介面。

最後，我也提供一個能直接在線使用的工具：JavaScript console

iphone+ safari 可以直接用satari開發工具調試。chrome+android也有類似的工具組合，但是沒有實際用過

Visual Studio + Windows 10 Mobile. 也支持 Cordova Android*/iOS** 應用的調試哦!

* 需要安裝可選的 VS 組件.

** 需要安裝可選的 VS 組件, 和用於遠程 build 的 Mac 設備.

iOS 上面有個應用 MIHTool 可以在移動端使用 weinre。為了應付 weinre 在移動端操作非常困難的問題，還順便提供了伺服器功能。

About MIHTool

真機調試的話，wenire 、Chrome inspect 都行，但是有缺點：

wenire 需要插入一段代碼，在線上調試比較難
Chrome inspect 比較好，但是要安卓系統4.4以上，局限比較大

現在都是Hybird開發的話，很多webview內置的介面根本沒辦法在瀏覽器上模擬。所以還是要真機來測。但是這樣太不優雅了。所以推薦自己的一篇文章打造最舒適的webview調試環境 · Issue #11 · riskers/blog · GitHub

像在文章中說的一樣，模擬器 + Chrome inspect + Fiddle / Charles 現在是比較完美的調試辦法。

這個筆記本用戶界面遠程調試 - Evernote Shared Notebook 在不斷地被維護著！另外，這是 Speakerdeck 上頭關於 "Mobile Debugging" 的幻燈片 https://speakerdeck.com/rem/mobile-debugging。

最笨的麻煩是手機開QQ電腦開QQ把做好的頁面傳給手機QQ直接打開。。

======================2016年

更新一下，我現在是用XAMPSS開測試的。首先要保證電腦和手機處於同一個區域網。

這樣的好處是可以借同事的蘋果手機方便瀏覽。

JavaScript console

這一個就夠了

可以看看我博客最新的兩篇文章：http://blog.allenm.me/2014/05/mobile-web-debug-guide-1/ http://blog.allenm.me/2014/05/mobile-web-debug-guide-2/

自薦開發的軟體:使用JScompress Mobile Debug調試手機端網頁歡迎測評

可以調試線上線下頁面(類似接近chrome體驗),捕獲/劫持請求(輕量級的fiddler)

直接在瀏覽器裡面啟用移動設備模擬器就行了，然後可以在sources裡面設置斷點，調試非常方便..

有一個編輯器叫Hbuilder，有個功能叫真機調試

前端和移動web前端的調試工具有很多類：

1、瀏覽器調試

2、代理工具

3、多終端同步工具

4、模擬器調試

5、多平台調試

6、雲真機調試

每種方式又各有工具，如Chrome工具。

具體學習的話，可以看看滬江前端團隊寫的這本書第11章，非常多的工具和調試環境。

移動Web前端高效開發實戰：HTML 5 + CSS 3 + JavaScript + Webp

可以試試web調試代理工具whistle，基本上涵蓋了這類工具可以做的事情：avwo/whistle

whistle也集成了常用的移動端調試方法，具體方法參考這篇文章：利用whistle調試移動端頁面

來推薦一波 wuchangming/spy-debugger

首先聲明，非原作者，只是覺得好用

特性：

1. 集成weinre、node-mitmproxy、AnyProxy

2. 支持https

3. 安裝使用方便

4. 可配合Charles等代理工具使用

iOS6是可以在safari中看控制台輸出的，iOS7就必須要連接到OS X系統中，使用OS X中的Safari進行調試，和使用PC端Chrome調試體驗一樣

如果沒有OS X或者在Android系統中可以使用Weinre(http://people.apache.org/~pmuellr/weinre/)

假裝有人邀，首先作為一個老司機我理解你的意思是在移動端和在pc端那樣打開一個console端，然後可以看網路請求，錯誤信息，基於這個假設，我推薦你試試vconsole這個開源插件，可以去github上搜，btw，有篇簡單的博文介紹：webapp調試工具推薦

fiddler不能再贊(????????