本文章轉載于搜狗測試
在PC上調試HTML頁面時，經常用到firefox上的firebug和chrome上的DevTools，這兩個工具幫助開發和測試在debug問題上提供了很大的便利。在當下移動互聯網熱的時代，無線端的HTML5的產品越來越多，面對紛繁復雜的瀏覽器環境（搜狗瀏覽器，chrome，手機自帶，app等等），經常遇到一些詭異的問題，在定位問題時令開發和測試束手無策。那么在移動端，是否也有這樣好用的工具呢？接下來為各位簡要介紹兩個好用的工具。
在介紹之前，先簡要說明一下，當前無線開發同學調試無線頁面的過程。目前常用的方法是在chrome上設置移動UA，模擬移動設備。這種方式的好處是顯而易見的，在PC瀏覽器上很方便進行現場調試，但有時遇到的一些兼容性的bug，在PC瀏覽器上是無法復現的。其中的一個原因是，手機廠商在自主研發過程中，會對android系統自帶的瀏覽器進行二次開發，開發的結果存在差異。如：聯想瀏覽器在地址欄里搜索關鍵詞時，會保留換行符的功能；其他瀏覽器都會把換行符轉換成空格。如果必須要在真實設備上進行調試，那如何操作呢？
傳統方式：
可以在頁面中加入一批alert語句，模擬斷點功能。這種方式解決功能問題還可以，如果是兼容問題，就不靈了。
使用fidder工具截包，修改包內容。
調試利器一：ChromeDevTools
Android手機允許USB調試。
手機連接電腦，并允許調試。
在PC ? ? chrome 瀏覽器地址欄中輸入：chrome://inspect。
勾選 ? ? “Discover USB devices”。
打開手機上chrome瀏覽器，并輸入需要debug的網址，如：wap.sogou.com。
在DevTools下的Devices可以看到移動端瀏覽器的鏈接。
點擊 ? ? inspect，在PC上Chrome DevTools中即可看到手機端chrome的頁面，PC端和手機端的操作是同步的。
debug case：修改“團購”為“美團”。
調試利器二：winre
Weinre代表We b In spector Re mote，是一種遠程調試工具。上一個工具，調試的局限性是，僅能在chrome中進行調試。而winre則適用于任何一個瀏覽器。
配置過程如下（weinre介紹主頁：http://people.apache.org/~pmuellr/weinre/docs/latest/）：
下載weinre的bin文件，并解壓到本地目錄。
在PC上配置node環境，具體搭建方式請搜狗一下。
啟動weinre服務：node weinre
訪問服務頁面“http://10.129.152.246:8090”，服務頁面中有兩項需要關注，調試窗口和要注入的js代碼，見標紅框。
將Target ? ? Script的代碼像引用正常js文件的一樣，引入到被測試頁面。如：
在手機任意瀏覽器中訪問被測試頁面
在PC瀏覽器中，打開“debug client user ? ? interface”中的鏈接。在Elements中即可看到手機瀏覽器中的元素內容。
調試case：將hello word 修改為 hello Sogou
手機瀏覽器里：
