chrome调试手机端页面 -- weinre

作为前端工程师，需要调试各个端的页面，我们熟悉chrome调试电脑端样式，对手机端却觉得有点无奈。尤其是我最近把页面放到企业微信中的时候，我发现通过手机连接电脑无法进行调试，这时候我们就需要抓包页面进行测试

推荐一款工具weinre

1. 安装weinre

首先你要有node.js的环境，使用npm install -g weinre安装weinre

2. 运行weinre

weinre --boundHost -all-

3. 启动 debug client

浏览器打开http://localhost:8080/（localhost是你本地的ip地址）
看到以下页面，说明运行成功

6.png

4. 引入script

• 打开debug client user interface的链接地址

image.png

• 向你的页面中加入

因为我的是VUE单页面项目，只要在index.html加入这个就行了

如果你的页面太多的话，可以使用书签保存下面的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. 开始调试

打开你要调试的页面，就发现targets上面出现了自己调试的页面，这些都是自己熟悉的功能，可以开始愉快的调试了

image.png

PS：手机和电脑要在同一个网络下面，比如连着同一个wifi