前端移动端三种调试工具及方法Eruda,Vconsole

起因

当我们写 webapp 或者 移动端网页时，想要在手机上进行调试是非常困难的事，因为在手机上无法直接看到日志输出。通常的办法是通过 alert 来打印日志，然后一遍一遍的定位问题修改代码。这样实在是太低效了，因此就诞生了eruda和 vConsole 这两款调试工具,还有Eruda-Android。从而极大的提升了我们的开发&调试的效率。

Eruda （推荐）

Github主页  Github中文文档

功能介绍：

• 按钮拖拽，面板透明度大小设置。

• Console 面板：捕获 Console 日志，支持 log、error、info、warn、dir、time/timeEnd、clear、count、assert、table；支持占位符，包括 %c 自定义样式输出；支持按日志类型及正则表达式过滤；支持 JavaScript 脚本执行。

• Elements 面板：查看标签内容及属性；查看应用在 Dom 上的样式；支持页面元素高亮；支持屏幕直接点击选取；查看 Dom 上绑定的各类事件。

• Network 面板：捕获请求，查看发送数据、返回头、返回内容等信息。

• Resources 面板：查看并清除 localStorage、sessionStorage 及 cookie；查看页面加载脚本及样式文件；查看页面加载图片。

• Sources 面板：查看页面源码；格式化 html，css，js 代码及 json 数据。

• Info 面板：输出 URL 及 User Agent；支持自定义输出内容。

• Snippets 面板：页面元素添加边框；加时间戳刷新页面；支持自定义代码片段。

体验demo：

界面预览：

快速上手使用：

//通过CDN使用：
<script src="//cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js"></script>
<script>eruda.init();</script>
//通过 npm 安装：
npm install eruda --save
//引入并初始化
import eruda from "eruda";
eruda.init()

2.vConsole：

GitHub地址   Github中文文档

简介：

一个轻量、可拓展、针对手机网页的前端开发者调试面板。

vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。

现在 vConsole 是微信小程序的官方调试工具。

功能介绍：

• 日志(Logs)： console.log|info|error|...

• 网络(Network)： XMLHttpRequest, Fetch, sendBeacon

• 节点(Element)： HTML 节点树

• 存储(Storage)： Cookies, LocalStorage, SessionStorage

• 手动执行 JS 命令行

• 自定义插件

体验demo：

快速上手使用：

//通过CDN使用：
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>new window.VConsole();</script>

//通过 npm 安装：
npm install vconsole
//引入并初始化
import VConsole from 'vconsole';
new VConsole();

3.Eruda-安卓APP 仅1.15MB

github主页  点击下载

简单的 Android 浏览器应用，自动加载 eruda。

PS:相当于一个手机浏览器，自带调试工具（eruda）不需要每个网站单独安装，引入。

界面预览：