在手机上查看H5项目控制台信息

原创已于 2025-03-28 16:25:02 修改 · 873 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #npm

于 2025-03-28 16:22:20 首次发布

在手机上查看H5项目控制台信息开发调试的方法

‌使用Eruda工具‌

eruda 点击页面其他地方关闭eruda功能需要添加自定义代码

<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<!-- <script>eruda.init();</script> -->
<script>
  eruda.init();
  // 点击页面其他地方关闭eruda
  document.addEventListener('click', function(event) {
    var erudaElement = document.querySelector('#eruda'); // 定位到eruda面板的元素，这取决于你的CSS类名
    var isClickOutside = !erudaElement.contains(event.target);

    if (isClickOutside && window.getComputedStyle(erudaElement).display !== 'none') {
      eruda.hide(); // 如果点击了外部并且eruda是可见的，则关闭它
    }
  });
</script>

‌使用vConsole工具

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script> 
<script> 
  // VConsole 默认会挂载到 `window.VConsole` 上 
  var vConsole = new window.VConsole(); 
</script>

对比

vConsole 和 eruda 各有优缺点，具体选择取决于你的需求和使用场景。‌

vConsole

‌优点‌：

‌轻量级‌：vConsole的体积较小，安装方便，适合需要轻量级调试工具的项目‌。

‌易于使用‌：通过简单的脚本引入即可使用，适合快速部署和调试‌。
‌缺点‌：

‌功能相对有限‌：由于体积小，功能可能不如eruda丰富‌。

eruda

‌优点‌：

‌功能丰富‌：eruda提供了更多的调试功能，包括捕获console日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和Cookie信息等‌。

‌自定义性强‌：可以通过CDN引入并配置参数，适合需要更多调试功能的项目‌。
‌缺点‌：

‌体积较大‌：eruda的体积相对较大，可能会影响页面加载速度‌。

‌网络请求显示问题‌：在网络调试中，eruda不显示WebSocket请求和样式表‌。

总结

适用场景

‌vConsole‌：适合需要快速部署和轻量级调试的项目，或者对调试功能要求不高的场景。

‌eruda‌：适合需要丰富调试功能、需要检查更多细节（如本地存储、性能指标等）的项目。

ps: 测试某报错空白页面，对比两个插件查看报错，eruda出现报错信息，vConsole报错信息未显示。