之前做移動前端調(diào)試頁面的時候就是簡單的使用Chrome模擬器調(diào)試饮六，能滿足基本基本的需求文狱；如果是涉及到真機調(diào)試Chrome根本沒辦法操作圆仔，此時可以使用Web Inspector(Webkit)的遠(yuǎn)程調(diào)試工具Weinre枯饿；Weinre可以在PC端直接調(diào)試運行在移動設(shè)備上的遠(yuǎn)程頁面番川，在PC端可以即時修改目標(biāo)網(wǎng)頁的HTML/CSS/Javascript，調(diào)試過程可實時顯示移動設(shè)備上頁面的預(yù)覽效果懈糯，并同步顯示設(shè)備頁面的錯誤和警告信息涤妒，可以查看網(wǎng)絡(luò)資源的信息，不支持?jǐn)帱c調(diào)試赚哗。
1她紫、安裝
// 要安裝了node
$ npm -g install weinre // windows沒有sudo命令
$ sudo npm -g install weinre //sudo是權(quán)限管理指令(在linux)
Weinre也從最初的Java移植到了當(dāng)前的NodeJS版本
2、運行weinre
// 指定自己本機的IP地址
$ weinre --boundHost 192.168.1.103
通過命令行查詢ip
window： $ ipconfig
linux/unix: $ ifconfig
3蜂奸、在瀏覽器中預(yù)覽可以看到下面頁面內(nèi)容
// 命令行中可以看到提示信息
瀏覽器中輸入 http://192.168.1.103:8080
瀏覽器中預(yù)覽
4犁苏、手機上訪問需要調(diào)試的web頁面，然后在頁面底部插入腳本:
<script src="http://192.168.1.103:8080/target/target-script-min.js#anonymous"></script>
手機端要調(diào)試扩所，必須有服務(wù)器围详，手機端可以訪問到服務(wù)器的頁面。另外手機和電腦都是在同一個局域網(wǎng)中!
手機端訪問調(diào)試頁面
5祖屏、PC端瀏覽器訪問http://192.168.1.103:8080/client/#anonymous助赞，可以看到以下效果
連接成功，調(diào)試
