移动端页面调试工具 vConsole 与 eruda

起因

当我们写 webapp 或者移动端网页时，想要在手机上进行调试是非常困难的事，因为在手机上无法直接看到日志输出。之前的办法是通过 alert 来打印日志，然后一遍一遍的定位问题修改代码。这样实在是太低效了，因此就诞生了 vConsole 和 eruda 这两款调试工具，其效果等价于PC端的 devtools，可以查看日志，网络，页面，Resources等

vConsole

Github 地址：https://github.com/Tencent/vConsole

在这里插入图片描述

单页面应用

对于单页面应用，安装完后，仅需要在入口引用即可
npm install vconsole

import VConsole from 'vconsole'; var vConsole = new VConsole();

多页面应用

cdn 是在猫云上面找的 https://www.bootcdn.cn/vConsole/

在这里插入图片描述

<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script> <script>const vConsole = new VConsole();</script>

用法

配置参数

可以在初始化时指定

const vConsole = new VConsole(option);

也可以使用 setOption() 进行设置

vConsole.setOption("maxLogNumber", 500); // 或者 vConsole.setOption({maxLogNumber: 500});

支持的参数在 Github 中有说明 https://github.com/Tencent/vConsole/blob/1eef3bee16ead445cec0264a1111e0912bf1265b/doc/public_properties_methods_CN.md

打印日志

支持 5 种不同的日志类型，会以不同的颜色输出到 vConsole 面板（支持传入多个参数，会以空格隔开）

类型	颜色
log	白底黑字
info	白底紫字
debug	白底黄字
warn	黄底白字
error	红底红字

console.log("test") console.info("test") console.debug("test") console.warn("test") console.error("test")

打印到 system

要打印到 system 面板，第一个参数有且仅能是 [system]

console.log('[system]', "test");

内置插件

所有的 XMLHttpRequest 请求都会被显示到 Network tab 中
如果不希望一个请求显示在面板中，可以添加 _noVConsole = true 到 XHR 对象中

var xhr = new XMLHttpRequest(); xhr._noVConsole = true; xhr.open("GET", "http://example.com"); xhr.send();

在x5内核中使用

以为例，直接打开 http://debugx5..com
切换到 “信息” 选项卡，然后勾选 “打开vConsole调试功能”
可以看到，加载聊天中的链接，和腾讯新闻，在右下角都会出现 vConsole 按钮，用它可以打开调试面板。

在这里插入图片描述

eruda

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

github 地址：https://github.com/liriliri/eruda 在这里插入图片描述

单页面应用

npm install --save-dev eruda

import eruda from 'eruda'; eruda.init();

多页面应用

cdn 是在猫云上面找的 https://www.bootcdn.cn/eruda/
在这里插入图片描述

<script src="https://cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.min.js"></script> <script>eruda.init();</script>

添加调试后门

(function(){ if(!/debug=true/.test(window.location.href)) return; const script = document.createElement("script"); script.src = "https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"; script.async = true; document.getElementsByTagName("head")[0].appendChild(script); script.onload = function() { window.vConsole = new VConsole(); } })()

使用 Javascript 异步加载库

if(isDebug) { loadJS( "path/to/script.js", function() { // file has loaded }); }

今天的文章移动端页面调试工具 vConsole 与 eruda分享到此就结束了，感谢您的阅读。

移动端页面调试工具 vConsole 与 eruda

起因

vConsole

单页面应用

多页面应用

用法

配置参数

打印日志

打印到 system

内置插件

在x5内核中使用

eruda

单页面应用

多页面应用

添加调试后门

使用 Javascript 异步加载库

相关推荐