作為前端工程師蕾羊，需要調(diào)試各個(gè)端的頁(yè)面，我們熟悉chrome調(diào)試電腦端樣式帽驯，對(duì)手機(jī)端卻覺得有點(diǎn)無(wú)奈龟再。尤其是我最近把頁(yè)面放到企業(yè)微信中的時(shí)候，我發(fā)現(xiàn)通過手機(jī)連接電腦無(wú)法進(jìn)行調(diào)試界拦，這時(shí)候我們就需要抓包頁(yè)面進(jìn)行測(cè)試
推薦一款工具weinre
1. 安裝weinre
首先你要有node.js的環(huán)境吸申，使用npm install -g weinre安裝weinre
2. 運(yùn)行weinre
weinre --boundHost -all-
3. 啟動(dòng) debug client
瀏覽器打開http://localhost:8080/（localhost是你本地的ip地址）
看到以下頁(yè)面，說明運(yùn)行成功
6.png
4. 引入script
-
打開debug client user interface的鏈接地址
image.png
-
向你的頁(yè)面中加入
因?yàn)槲业氖荲UE單頁(yè)面項(xiàng)目享甸，只要在index.html加入這個(gè)就行了
<script src="http://ip地址:端口號(hào)/target/target-script-min.js#anonymous" type="text/javascript"></script>
如果你的頁(yè)面太多的話截碴，可以使用書簽保存下面的js
javascript:(function(e){e.setAttribute("src","http://10.136.30.144:8081/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);
5. 開始調(diào)試
打開你要調(diào)試的頁(yè)面，就發(fā)現(xiàn)targets上面出現(xiàn)了自己調(diào)試的頁(yè)面蛉威，這些都是自己熟悉的功能日丹，可以開始愉快的調(diào)試了
image.png
