H5移动端远程调试

前端分享-H5移动端调试

背景

H5页面在PC上调试起来很方便，但是在手机上却很麻烦，此时移动端就像一个黑匣子，查看或修改DOM、CSS，localStore等变的很困难。
这个时候远程调试就孕育而生了。

weinre

什么是weinre

Weinre是单词缩写，全称是网页远程审查（Web Inspector Remote）

weinre能做什么

对应上面的菜单，weinre有5大功能

1. Element： 查看/修改dom，查看/修改 dom CSS
2. Resources：查看/修改 localStorage, sessionStorage
3. Network：查看网络请求
4. Timeline：
5. Console：查看控制台输出

weinre原理

目标页面（target）：被调试的页面，页面已嵌入weinre的远程js，下文会介绍；
Debug客户端（client）：本地的Web Inspector调试客户端；
Debug服务端（agent）：一个HTTP Server，为目标页面与Debug客户端建立通信（target和client不断的向agent发生get/post请求）。

原理就是Client的任何操作命令都会发给target执行，同样target的任何操作也会发给client执行。

搭建环境&使用

weinre是基于nodeJs程序，安装weinre包

npm install -g weinre

启动weinre服务 （代理【agent】服务）

weinre --boundHost 10.10.119.218 --httpPort 8888

参数说明参考：http://people.apache.org/~pmu…
如果显示下面内容则说明服务启动了。

2016-01-19T10:37:26.772Z weinre: starting server at http://10.32.69.133:8888

启动调试客户端

在浏览器中打开”http://10.32.69.133:8888“即可启动调试客户端

创建Target

创建个页面，并加入以下JS（表示从代理服务中引入target/target-script-min.js）。

<!- IP是weinre服务的IP -->
<script src="http://10.32.69.133:8888/target/target-script-min.js"></script>

进入操作界面就可以尽情操作了。

[外链图片转存失败(img-b1m9bKm7-1566664327685)(C:\Users\yejiancong\AppData\Roaming\Typora\typora-user-images\1565179876012.png)]

针对Vue项目

我们可以使用vConsole

使用方法

多页面应用

在每个页面

<script src="path/to/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script> 

单页应用

我们在项目的入口引用这个文件就可以

npm install vconsole
var vConsole = new VConsole();
console.log('Hello world');