在 如何用 fiddler 代理調試本地手機頁 一文中我們了解了如何用手機查看 PC 端寫的網頁(本地),但是我們只能看到頁面效果,如果哪段 js 掛了,那部分樣式失效了,我們該如何進行調試呢?今天為大家介紹的 UC 瀏覽器開發者版(安卓版)就是這樣一個神器!
1、一台PC、一台手機
很顯然首先你得需要一台 PC 機,一台手機,並把它們連上同一個網段的網絡(推薦做法,也可以 USB 連接調試,詳見UC瀏覽器開發者版)。
2、PC、移動端文件安裝
毫無疑問,移動端需要安裝 UC 瀏覽器開發者版。而 PC 端需要安裝 ADB工具,是個壓縮文件,解壓后雙擊 exe 文件就 OK 了。
3、調試
准備工作完成,接下去就是激動人心的調試環節了!
首先在移動端打開安裝的瀏覽器,打開需要調試的頁面。
接着我們打開 PC 端的 chrome 瀏覽器(Safari 也可以,建議 chrome),在地址欄輸入 手機IP+:9998,比如我的是 http://192.168.23.10:9998/
。我在手機端打開了兩個網頁,在 PC 端顯示如下:
接着點擊任一你需要調試的網頁,此時瀏覽器的 url 會發生變化,手機那邊會跳出對話框如下,點確定就 ok 了。
接着會出現 chrome 調試面板(不知道是什么版本的,反正很古老!)如果沒出來,耐心等一會。
接着就進入調試模式了,你會發現手機屏幕的左上角多了個小把手。nice!接下去就可以像 PC 端一樣調試了,需要注意的是,如果你想刷新頁面重新發送請求,要在手機上刷新!這個時候,也可以愉快地進行 js 調試了,爽歪歪!
我打開了百度首頁,鼠標移到 PC 端 Elements 面板上的搜索框代碼部分,手機端就會有響應了!
PS:在我的機器上 chrome 面板(Elements 模塊)展開不好用,需要雙擊,而且雙擊展開后就關不上了。
UC 瀏覽器開發者版調試也有兩個明顯的缺點:
- 僅支持安卓機
- 無法做到瀏覽器兼容(比如程序只在 Safari 上出了問題)