1. 程式人生 > >用chrome 除錯手機微信X5網頁

用chrome 除錯手機微信X5網頁

目前只在安卓上做了測試,IOS可能不支援

1.開啟手機的USB除錯功能

     點設定-》開發者選項-》USB除錯

    如果看不到開發者選項,在關於手機中點選內部版本號7次,即出現開發者已啟用的提示。

    將手機通過USB連線到電腦

2.開啟微信手機端除錯功能

  在微信中點選連結   http://debugx5.qq.com

或者直接掃碼:

勾選Inspector除錯功能

3.在微信中開啟要除錯的網頁

   可以將一個網址發到對話視窗,點選進入。或者開啟公眾號點選進入網頁。

4.在chrome中除錯

     位址列 輸入chrome://inspect/#devices

點選inspect,出現除錯視窗。可是這時候你看到的一定是一個白花花的空白視窗。為啥呢?因為第一次連入的時候chrome會去谷歌網站下載程式包,國內無法訪問谷歌,所以就卡在這裡了。這時候必須翻牆才可以解決。我用的布穀加速器速度不錯。

成功後的介面如下

和在電腦上開啟網頁一模一樣,也可以在電腦上點選滑鼠,手機和電腦螢幕是同步的。是不是很爽啊?

 

另外吐槽一下微信的開發者工具

在微信公眾號開發網站上下載的開發者工具竟然是2016年的0.7版本。 該版本有除錯功能,其實呼叫的chrome核心

但是搜尋微信web開發者工具最新版本,發現現在版本已經是2018年的1.02了。安裝後,公眾號網頁的真機除錯功能直接閹割掉了。chrome://inspect/#devices 輸在位址列也沒用。

 難道騰訊小程式出來後就不管公眾號開發了嗎?所幸chrome幫我們解決了一切。