本文章轉(zhuǎn)載于搜狗測(cè)試
在PC上調(diào)試HTML頁面時(shí)茸俭，經(jīng)常用到firefox上的firebug和chrome上的DevTools狠持，這兩個(gè)工具幫助開發(fā)和測(cè)試在debug問題上提供了很大的便利合是。在當(dāng)下移動(dòng)互聯(lián)網(wǎng)熱的時(shí)代火窒，無線端的HTML5的產(chǎn)品越來越多甚垦，面對(duì)紛繁復(fù)雜的瀏覽器環(huán)境（搜狗瀏覽器届垫，chrome释液，手機(jī)自帶，app等等）装处，經(jīng)常遇到一些詭異的問題误债，在定位問題時(shí)令開發(fā)和測(cè)試束手無策。那么在移動(dòng)端妄迁，是否也有這樣好用的工具呢寝蹈？接下來為各位簡要介紹兩個(gè)好用的工具。
在介紹之前登淘，先簡要說明一下箫老，當(dāng)前無線開發(fā)同學(xué)調(diào)試無線頁面的過程。目前常用的方法是在chrome上設(shè)置移動(dòng)UA黔州，模擬移動(dòng)設(shè)備耍鬓。這種方式的好處是顯而易見的，在PC瀏覽器上很方便進(jìn)行現(xiàn)場(chǎng)調(diào)試辩撑，但有時(shí)遇到的一些兼容性的bug界斜，在PC瀏覽器上是無法復(fù)現(xiàn)的。其中的一個(gè)原因是合冀，手機(jī)廠商在自主研發(fā)過程中各薇，會(huì)對(duì)android系統(tǒng)自帶的瀏覽器進(jìn)行二次開發(fā)，開發(fā)的結(jié)果存在差異君躺。如：聯(lián)想瀏覽器在地址欄里搜索關(guān)鍵詞時(shí)峭判，會(huì)保留換行符的功能；其他瀏覽器都會(huì)把換行符轉(zhuǎn)換成空格棕叫。如果必須要在真實(shí)設(shè)備上進(jìn)行調(diào)試林螃，那如何操作呢？
傳統(tǒng)方式：
可以在頁面中加入一批alert語句俺泣，模擬斷點(diǎn)功能疗认。這種方式解決功能問題還可以完残，如果是兼容問題，就不靈了横漏。
使用fidder工具截包谨设，修改包內(nèi)容。
調(diào)試?yán)饕唬篊hromeDevTools
Android手機(jī)允許USB調(diào)試缎浇。
手機(jī)連接電腦扎拣，并允許調(diào)試。
在PC ? ? chrome 瀏覽器地址欄中輸入：chrome://inspect素跺。
勾選 ? ? “Discover USB devices”二蓝。
打開手機(jī)上chrome瀏覽器，并輸入需要debug的網(wǎng)址指厌，如：wap.sogou.com刊愚。
在DevTools下的Devices可以看到移動(dòng)端瀏覽器的鏈接。
點(diǎn)擊 ? ? inspect仑乌，在PC上Chrome DevTools中即可看到手機(jī)端chrome的頁面百拓，PC端和手機(jī)端的操作是同步的。
debug case：修改“團(tuán)購”為“美團(tuán)”晰甚。
調(diào)試?yán)鞫簑inre
Weinre代表We b In spector Re mote，是一種遠(yuǎn)程調(diào)試工具决帖。上一個(gè)工具厕九，調(diào)試的局限性是，僅能在chrome中進(jìn)行調(diào)試地回。而winre則適用于任何一個(gè)瀏覽器扁远。
配置過程如下（weinre介紹主頁：http://people.apache.org/~pmuellr/weinre/docs/latest/）：
下載weinre的bin文件，并解壓到本地目錄刻像。
在PC上配置node環(huán)境畅买，具體搭建方式請(qǐng)搜狗一下。
啟動(dòng)weinre服務(wù)：node weinre
訪問服務(wù)頁面“http://10.129.152.246:8090”细睡，服務(wù)頁面中有兩項(xiàng)需要關(guān)注谷羞，調(diào)試窗口和要注入的js代碼，見標(biāo)紅框溜徙。
將Target ? ? Script的代碼像引用正常js文件的一樣湃缎，引入到被測(cè)試頁面。如：
在手機(jī)任意瀏覽器中訪問被測(cè)試頁面
在PC瀏覽器中蠢壹，打開“debug client user ? ? interface”中的鏈接嗓违。在Elements中即可看到手機(jī)瀏覽器中的元素內(nèi)容。
調(diào)試case：將hello word 修改為 hello Sogou
手機(jī)瀏覽器里：
