H5 页面怎么添加控制台

1. 查看控制台日志的第三方库

eruda和VConsole都是移动端前端调试工具，可以在移动设备上轻松地进行前端调试和查看控制台日志。

Eruda 是一个面向移动端的轻量级前端调试工具，它具有以下特点：

1. 易于使用：通过在移动设备上引入eruda库，并简单的初始化即可启用。使用方便，操作简单。

2. 功能丰富：提供了类似于电脑浏览器的控制台窗口，支持查看 console 输出信息、错误信息等。还有网络请求监控、查看页面元素、性能分析等功能。

3. 自定义配置：可以根据自己的需求进行配置，比如设置显示/隐藏特定的面板、调整字体大小和颜色等。

4. 体积小巧：eruda 的代码非常精简，压缩后大约只有 20KB 左右，对页面性能影响较小。

VConsole 是另一个常用的移动端前端调试工具，也具备类似于 Eruda 的功能，并且有其独特之处：

1. 方便集成：VConsole 提供了简单易用的 API 来创建和激活一个控制台实例，同时支持自定义插件的开发和集成。

2. 多个面板：除了常见的控制台面板，VConsole 还提供了网络请求、DOM 结构、LocalStorage 等多个面板显示更多的调试信息。

3. 兼容性强：VConsole 支持大部分主流浏览器，包括 Android 和 iOS 上的各种移动浏览器。

不论是eruda还是VConsole，它们都为移动端的前端调试提供了便利，使开发者能够方便地在手机上进行调试和查看控制台输出，帮助快速定位问题并加速开发过程。开发者可以根据个人喜好和项目需求选择其中之一来使用。

2. eruda用法

以下是使用eruda和VConsole的代码示例：

使用 eruda：

1. 在你的 H5 页面中引入 eruda 库：

<script src="//cdn.jsdelivr.net/npm/eruda"></script>

2. 在页面加载完成后，初始化并激活 eruda：

<script>
  window.onload = function() {
    eruda.init();
  };
</script>

3. 在移动设备上访问该 H5 页面时，可以通过在浏览器地址栏输入 javascript:eruda.init() 或者在控制台中输入 eruda.init() 来手动激活 eruda。

3. VConsole用法

使用 VConsole：

1. 在你的 H5 页面中引入 VConsole 库：

<script src="//cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>

2. 在页面加载完成后，初始化并激活 VConsole：

<script>
  window.onload = function() {
    var vConsole = new VConsole();
  };
</script>

3. 在移动设备上访问该 H5 页面时，可以通过在浏览器地址栏输入 javascript:new VConsole() 或者在控制台中输入 new VConsole() 来手动激活 VConsole。

以上代码示例中，引入了 eruda 和 vConsole 的库，并在页面加载完成后进行初始化操作。通过激活 eruda 或 VConsole，就可以在移动设备上查看控制台输出信息了。请注意确保你的网络环境可以正常访问相应的 CDN 链接。