如何用手機測試自己寫的web頁面？

rt

---

剛好我這幾天寫過一篇文章。

下面多圖預警。。。
由於重新傳圖，排版可能不好。然後圖片大小也不能調整，所以就。。。。

一、IOS 移動端 （Safari開發者工具）

手機端：設置 → Safari → 高級 → Web 檢查器 → 開。

mac端：Safari → 偏好設置 → 高級 → 在菜單欄中顯示「開發」菜單。

在 OS X 中啟動 Safari 之後，以 USB 電纜正常接入 iOS 設備，並在此移動設備上啟動 Safari。此時點擊計算機上的 Safari 菜單中的「開發」，可以看到有 iOS 設備的名稱顯示，其子菜單項即為移動設備上 Safari 的所有標籤頁，點擊任意一個開始調試。

便捷，簡單，還可以調試外殼包裹的瀏覽器如微信。

備註：順便提一下，要調試不同版本的ios，可以進xcode 進行下載不同的系統包（當然是在沒有設備的情況下，土豪略過）

二、安卓移動端

1、chrome 調試方法

首先確保手機上和PC機上裝有最新版本的chrome瀏覽器，其次是將手機的開發者選項打開並允許調試，然後將數據線將兩台設備連接起來。在PC機上打開chorme，輸入chrome://inspect ，然後在手機上打開chrome，然後手機會彈框詢問是否允許調試，當然確定啦。有時候手機鎖屏會斷開，請拔掉usb重來。

點擊inspect打開DevTools後，你可以選中頁面中的DOM元素，同時設備中對應元素也高亮顯示，也可使用DevTools中的Inspect Element 選中目標元素，可以實時與移動設備頁面交互，方便的定位問題所在，進行代碼調試，就能像pc端一樣愉快的玩耍了。如果有問題，請檢查chrome版本。

chrome的調試一般只可以調試chrome頁面，但是其官方文檔說還可以調試WebViews：

「On your computer, the chrome://inspect page displays every connected device, along with its open tabs and debug-enabled WebViews.」

需要說明調試WebView需要滿足安卓系統版本為Android 4.4+，並且需要再你的APP內配置相應的代碼，在WebView類中調用靜態方法setWebContentsDebuggingEnabled，如下：

if (Build.VERSION.SDK_INT &>=Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}


以上配置方法適用於安卓應用內所有的WebView情形。

安卓WebView是否可調試並不取決於應用中manifest的標誌變數debuggable，如果你想只在debuggable為true時候允許WebView遠程調試，請使用以下代碼段：

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 ，當然土豪當我沒說。

2、UC開發者瀏覽器

由於不推薦移動端使用UC（大家應該自覺抵制移動端毒瘤），所以我只簡單說一下，如果是在有興趣，請自行查看： 開發者中心_UC優視︱UC瀏覽器︱全球第一大手機瀏覽器，用戶超過5億人︱手機瀏覽器

它的調試方法與chrome差異不大。

3、使用 Weinre 調試

該方法是比較老的一種方法，對於其他的調試方法來說屬於刀耕火種型的。weinre是一個調試包，本身提供一個JavaScript，需要你在項目文件中加入該js。首先安裝Weinre，我們用nodejs安裝之，使用-g全局命令，以便可以在各個目錄下訪問：

npm install -g weinre


安裝weinre之後再設置監聽本機的ip:

然後打開返回的地址的說明文檔，然後把返回的js寫入到調試的文檔中，注意我箭頭所指向的地方。

這樣訪問頁面的時候，載入這個 JS，就會被 Weinre 監聽到進行控制。

小提示：這個 JS 後面的 #anonymous 起到一個標識作用，為了區別，我們可以將其修改成 #test 放到頁面中。這時候，我們的 Inspect 面板的地址就不是 http://172.16.0.2:8080/client/#anonymous 了，而是 http://172.16.0.2:8080/client/#test 。

當我們訪問頁面的時候，就會出現在監聽列表中，如果有多個網頁，你可以從列表中選擇一個。然後就可以使用後面的 Elements、Console 等面板來進行調試操作了：

Weinre 非常靈活，只需要在頁面中載入這個 JS，然後訪問即可，因此 WebView 可以用這種方法調試，一些低版本的 Android、iOS 也可以支持，Window Phone 也是可以用的。在調試移動設備時你可能需要在本地搭建一個區域網 IP 的伺服器，將設備與本機網路連接成一個區域網，用移動設備訪問這個網頁即可。

當然 Weinre 也不是萬能的，相比 Chrome 的調試工具，它缺少 JavaScript debug 以及 Profiles 等常用功能，但是它兼容性強，可以實現基礎調試功能。

4、mihtool 測試

MIHTool 是國人開發的，基於 Weinre，用於 iOS 設備的前端開發測試。

與Weinre 的調試方式大體一樣，即開啟一個伺服器，然後將 JS 插入到頁面中，訪問進行調試。

MIHTool 將這個過程簡化了，它是一個 APP，可以直接安裝到你的 iOS 設備裡面，然後內置一個簡單的瀏覽器可以打開你的測試頁面，當它開啟時，會自動向頁面中插入 Weinre 的 JS，並告知 Weinre 控制台 URL 等信息，讓你可以訪問進行調試。

它還提供了一個公共的 Weinre 調試服務，生成類似 MIHTool Web Inspector 這樣的鏈接，打開即可調試，非常方便，就是有些卡。

5、移動設備在線測試

移動端設備如此之多，小公司或者團隊，沒有這麼多資金和精力購買如此多的測試設備進行測試。於是就有人買了這些設備，連接起來，提供在線調試服務。

一般就是他的真實手機設備打開，然後截屏出來供預覽。

比如：BrowserStack 等，當然一般比較卡。

（話說這種貌似可以刷一點pv和uv出來。。。）

三、總結

調試方法很多，層出不窮，關鍵是要看自己是否順手和熟練，關鍵在於按時按量的完成開發任務。

關鍵在於平時多積累跨坑姿勢，少寫一點不兼容的代碼，調試就舒心一點。

如果這還不滿足的話，可以查看更多資料：

移動端前端開發調試： http://yujiangshui.com/multidevice-frontend-debug/

移動開發真機調試： 移動開發真機調試

remote_inspect_web_on_real_device： jieyou/remote_inspect_web_on_real_device · GitHub

remote-debugging： https://developer.chrome.com/devtools/docs/remote-debugging

移動端Web開發調試之Chrome遠程調試(Remote Debugging)：移動端Web開發調試之Chrome遠程調試(Remote Debugging)

－－－－－－－－－－－－2015/12/2 補充 BrowserSync 部分－－－－－－－－－－－－－

很多朋友再說為什麼不寫Browser-sync，還有給差評的，說實話吧，我之前不了解那個東西。花了點時間看了一下，找到了他們的官網：Browsersync - Time-saving synchronised browser testing 覺得還挺有趣的哈。

然後就用了，覺得還行，真的會省很多工夫，入門也快，差不多就5分鐘快速入門，前端的輪子都這樣。。。

1、首先安裝 BrowserSync

npm install -g browser-sync


2、啟動 BrowserSync，原理應該是那種檢測文件變化，然後在服務端 websocket 通知瀏覽器變動，再載入新的變動文件，在不支持websocket 的瀏覽器上就輪訓服務端的變化，在載入新文件。我只是簡單的抓包看了下，也不知道說對了沒有。233

此時分兩種情況，一種是靜態：

// 監聽css文件
browser-sync start --server --files "css/*.css"
// 監聽css和html文件
browser-sync start --server --files "css/*.css, *.html"


二種是動態：

// 主機名可以是ip或域名
browser-sync start --proxy "主機名" "css/*.css"


然後就上手了啊，就這麼簡單。。

還有gulp 配合哦。具體就看文檔了：Browsersync + Gulp.js

總結，前端變化日新月異，一個月不學，感覺就落後了啊

－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－

這裡是 @於江水 大神的原文，之所以圈他一下，因為我的這個文檔從他那兒粘貼了很多，這個是他的原文：--&> 移動端前端開發調試 。
上面的更多資料部分，我也講其放在第一個，不過之前的鏈接放錯了，不是原博客鏈接，現在已更正。

這是我整理的，每一個我都真正的動手實現了的，關於安卓webview的調試部分我還補充了點我找到的資料 --&> 移動端前端開發真機調試攻略

－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－

ps.我用的百詞斬的網站做示例，因為我目前在那兒實習（才剛去一周多），leader叫我寫一篇移動端開發的真機調試文檔出來，所以就醬紫了

---

基本的調試方法都被 @愛吃西紅柿的魚講完了， 我提供另外一種方法。
需要的軟體 Charles
1. 把你的手機的代理 設置為你的電腦的IP 埠為8888

2.你的頁面寫完了，在頁面中隨便寫一個域名目錄你的html文件，偽造一個url 生成二維碼

3.微信掃描二維碼
你看到的是一個錯誤頁面，或者是一個跳轉的域名錯位頁面，這個可以不用管。
你看到charle里抓包的數據是這樣的。

右鍵選擇Map local

選擇你本地的文件來代理線上的文件

然後回到微信刷新頁面 或者重新掃描二維碼 就可以看到你寫的頁面了。這樣

代理前的樣子

代理成功的樣子

如果需要調試移動端頁面的錯誤信息 最好的方法 還是 手機鏈接電腦 用Safari來調試

---

自薦一篇文章：移動端前端開發調試 。各種情況各種平台的調試技術和方法都有提到。

---

架個臨時伺服器，用手機連電腦區域網，訪問即可測試，記得把localhost改成電腦ip即可

---

Vorlon.JS

# Intro

An open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. Powered by node.js and socket.io.

# Usage

$ npm i -g vorlon
$ vorlon

# The Vorlon server is running
# With the server is running, open http://localhost:1337


&