好用的調試工具

移動端調試工具

• • • • ChromeDevTools
      • • Weinre

ChromeDevTools

在PC上調試HTML頁面時，經常用到firefox上的firebug和chrome上的DevTools，這兩個工具幫助開發和測試在debug問題上提供了很大的便利。在當下移動網際網路熱的時代，無線端的HTML5的産品越來越多，面對紛繁複雜的浏覽器環境（搜狗浏覽器，chrome，手機自帶，app等等），經常遇到一些詭異的問題，在定位問題時令開發和測試束手無策。那麼在移動端，是否也有這樣好用的工具呢？接下來為各位簡要介紹兩個好用的工具。

在介紹之前，先簡要說明一下，目前無線開發同學調試無線頁面的過程。目前常用的方法是在chrome上設定移動UA，模拟移動裝置。這種方式的好處是顯而易見的，在PC浏覽器上很友善進行現場調試，但有時遇到的一些相容性的bug，在PC浏覽器上是無法複現的。其中的一個原因是，手機廠商在自主研發過程中，會對android系統自帶的浏覽器進行二次開發，開發的結果存在差異。

1. Android手機允許USB調試。
2. 手機連接配接電腦，并允許調試。
3. 在PC chrome 浏覽器位址欄中輸入：chrome://inspect。

   

4. 勾選 “Discover USB devices”。
5. 打開手機上chrome浏覽器，并輸入需要debug的網址
6. 在DevTools下的Devices可以看到移動端浏覽器的連結。

點選 inspect，在PC上Chrome DevTools中即可看到手機端chrome的頁面，PC端和手機端的操作是同步的。

Weinre

Weinre代表We b In spector Re mote，是一種遠端調試工具。上一個工具，調試的局限性是，僅能在chrome中進行調試。而winre則适用于任何一個浏覽器。

配置過程如下weinre介紹首頁

1. 下載下傳weinre的bin檔案，并解壓到本地目錄。
2. 在PC上配置node環境，具體搭建方式請搜狗一下。
3. 啟動weinre服務：node weinre

1. 通路服務頁面“http://10.129.152.246:8090”，服務頁面中有兩項需要關注，調試視窗和要注入的js代碼，見标紅框。

5. 将Target Script的代碼像引用正常js檔案的一樣，引入到被測試頁面。如：

6.在手機任意浏覽器中通路被測試頁面

7.在PC浏覽器中，打開“debug client user interface”中的連結。在Elements中即可看到手機浏覽器中的元素内容。

6.調試case：将hello word 修改為 hello Sogou

6.手機浏覽器裡：