轉(zhuǎn)自：不愛吃西紅柿的魚
IOS 移動端 （Safari開發(fā)者工具）
手機端：設(shè)置?→ Safari →?高級?→ Web 檢查器?→?開。
mac端：Safari →?偏好設(shè)置?→?高級?→?在菜單欄中顯示“開發(fā)”菜單。
在 OS X 中啟動 Safari 之后，以 USB 電纜正常接入 iOS 設(shè)備，并在此移動設(shè)備上啟動 Safari。此時點擊計算機上的 Safari 菜單中的“開發(fā)”，可以看到有 iOS 設(shè)備的名稱顯示，其子菜單項即為移動設(shè)備上 Safari 的所有標簽頁，點擊任意一個開始調(diào)試。
便捷，簡單，還可以調(diào)試外殼包裹的瀏覽器如微信。
備注：順便提一下，要調(diào)試不同版本的ios，可以進xcode 進行下載不同的系統(tǒng)包（當然是在沒有設(shè)備的情況下，土豪略過）
chrome 調(diào)試方法
首先確保手機上和PC機上裝有最新版本的chrome瀏覽器，其次是將手機的開發(fā)者選項打開并允許調(diào)試，然后將數(shù)據(jù)線將兩臺設(shè)備連接起來。在PC機上打開chorme，輸入chrome://inspect?，然后在手機上打開chrome，然后手機會彈框詢問是否允許調(diào)試，當然確定啦。有時候手機鎖屏?xí)嚅_，請拔掉usb重來。
點擊inspect打開DevTools后，你可以選中頁面中的DOM元素，同時設(shè)備中對應(yīng)元素也高亮顯示，也可使用DevTools中的Inspect Element 選中目標元素，可以實時與移動設(shè)備頁面交互，方便的定位問題所在，進行代碼調(diào)試，就能像pc端一樣愉快的玩耍了。如果有問題，請檢查chrome版本。
chrome的調(diào)試一般只可以調(diào)試chrome頁面，但是其官方文檔說還可以調(diào)試WebViews：
“On your computer, the chrome://inspect page displays every connected device, along with its open tabs and debug-enabled WebViews.”
需要說明調(diào)試WebView需要滿足安卓系統(tǒng)版本為Android 4.4+，并且需要再你的APP內(nèi)配置相應(yīng)的代碼，在WebView類中調(diào)用靜態(tài)方法setWebContentsDebuggingEnabled，如下：
if (Build.VERSION.SDK_INT?>=Build.VERSION_CODES.KITKAT)?{
WebView.setWebContentsDebuggingEnabled(true);
}
以上配置方法適用于安卓應(yīng)用內(nèi)所有的WebView情形。
安卓WebView是否可調(diào)試并不取決于應(yīng)用中manifest的標志變量debuggable，如果你想只在debuggable為true時候允許WebView遠程調(diào)試，請使用以下代碼段：
if (Build.VERSION.SDK_INT>= Build.VERSION_CODES.KITKAT)?{
if (0?!=?(getApplicationInfo().flags?&=ApplicationInfo.FLAG_DEBUGGABLE{
WebView.setWebContentsDebuggingEnabled(true);
}
}
我這里只寫了個大概，如果有其他問題或者欲查看詳細文檔，看下面鏈接（自備梯子）：
https://developer.chrome.com/devtools/docs/remote-debugging
注意：同樣的你也可以在電腦上裝安卓的虛擬機，推薦Genymotion ，一樣的，想測什么版本，就自己下rom?，當然土豪當我沒說。
移動設(shè)備在線測試
移動端設(shè)備如此之多，小公司或者團隊，沒有這么多資金和精力購買如此多的測試設(shè)備進行測試。于是就有人買了這些設(shè)備，連接起來，提供在線調(diào)試服務(wù)。
一般就是他的真實手機設(shè)備打開，然后截屏出來供預(yù)覽。
比如：https://www.browserstack.com等，當然一般比較卡。
