起因
当我们写 webapp 或者 移动端网页时，想要在手机上进行调试是非常困难的事，因为在手机上无法直接看到日志输出。之前的办法是通过 alert 来打印日志，然后一遍一遍的定位问题修改代码。这样实在是太低效了，因此就诞生了 vConsole 和 eruda 这两款调试工具，其效果等价于PC端的 devtools，可以查看日志，网络，页面，Resources等
vConsole
vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板，是微信官方出品，主要用于移动调试。
vConsole可以查看 console 日志，可以查看网络请求，查看页面 element 结构，查看 Cookies 和 localStorage，可以手动执行 JS 命令行，可以自定义插件。
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内核中使用
以QQ为例，直接打开 http://debugx5.qq.com
切换到 “信息” 选项卡，然后勾选 “打开vConsole调试功能”
可以看到，QQ加载聊天中的链接，和腾讯新闻，在右下角都会出现 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> 添加调试后门
可以通过在网址末尾添加 debug=true 参数来打开调试。
以 vConsole 为例，我们的代码可以这么写
(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 便宜香港vps = function() {window.vConsole = new VConsole();}})() 使用 Javascript 异步加载库
如果需求是通过服务端的某个参数，来开关调试，可以选用动态加载的方式
首先引入 LoadJS 模块，Github 地址：https://github.com/filamentgroup/loadJS
if(isDebug) {loadJS( “path/to/script.js”, function() {// file has loaded});}
