移动端H5页面调试

2020.9.16 星期三 11：57

移动端（web页面）开发/调试手段

基本手段

chrome （pc）

Chrome 控制台 device模拟
调ui，请求等方便

真机

1）原始/粗暴：alert
2）使用代理/抓包工具，抓包请求
代理/抓包工具：chalrs，f*, 等。新秀alibaba/lightpro
alibaba/lightproxy
文档：https://lightproxy.org/zh-CN/doc/getting-started

3）通过数据线连接
安卓：Chrome Remote Devices
依赖 Chrome 来进行远程调试，适合安卓手机。
首先，开启 Android 手机的「开发者选项」，勾选「USB 调试」。
然后，Chrome 中输入：chrome://inspect，进入调试页面。

iPhone
iphone【设置】>【Safari】>【高级】>【Web检查器】
打开mac safari ,找到开发。在safafri中看到的iphone打开的连接以及h5内容

4）调试工具：vConsole；Eruda

看起来很完美，但是有个小缺点：网络请求，需要刷新页面，可是很多内嵌的 H5 页面是没有机会刷新页面的，所以需要客户端童鞋配合增加刷新的功能方便调试。

5) 其他：vorlon （（在Vue多页面工程中，单页面未尝试，但是原理应该一样）

1.首先进行全局安装vorlon（cnpm install -g vorlon）;
2.然后在index.html（需要监控的界面）添加
3.打开cmd，输入vorlon执行
4.在浏览器中打开http://192.168.1.:（你配置的监控ip和端口）进行监控

模拟器

移动端开发（原生）编辑器可以模拟设备运行
可以看到各种信息，包括日志，请求，资源等。可断点

h5跨端开发

或者下载安卓模拟器（ios没听说）
其余流程就和真机一致

混合开发

嵌套在webview的h5页面，可以在原生开发的编辑器中输入日志的信息
（监听webview 的console.log/alert等。或者约定debug方式/函数）
然后在端上开发老师的编辑器，查看到日志等信息

总结

不同方式有不同的场景。
不同的bug/调试，可能要通过一种或者多种方式。

终极

究极，肉眼debug

调试包

Eruda

github: https://github.com/liriliri/eruda

Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、显示性能指标、捕获 XHR 请求、显示本地存储和 Cookie 信息、浏览器特性检测等等。

Js 文件对于移动端来说略重（ gzip 后大概 80kb ）。建议通过 url 参数来控制是否加载调试器，比如

<script>
;(function () {
    var src = 'node_modules/eruda/eruda.min.js';
    if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();
</script>

<script
  src="//activity.xueersi.com/topic/growth/base/js/debug@0.0.1/debug.min.js"
  async="async"
></script>
<!-- debug@0.0.1/debug.min.js -->
<script>
!function(){if(/debug=xesv5/.test(window.location)){var n=document.createElement("script");n.src="https://cdn.bootcss.com/eruda/1.5.4/eruda.min.js",document.body.appendChild(n),n.onload=function(){eruda.init()}}}();
<script>

vConsole

github: https://github.com/Tencent/vConsole
一个轻量、可拓展、针对手机网页的前端开发者调试面板。

打印日志
与 PC 端打印 log 一致，可直接使用 console.log() 等方法直接打印日志：console.log('Hello World');
未加载 vConsole 模块时，console.log() 会直接打印到原生控制台中；
加载 vConsole 后，日志会打印到页面前端+原生控制台。