参考文档：https://www.cnblogs.com/zhangycun/p/10138404.html
通常写前端页面都在谷歌浏览器的开发模式下进行调试，但是写放在移动端的H5页面时，有时候会遇到在Chrome上调试没有问题，但是在手机的浏览器上有问题的情况，看不到打印呀，报错呀，调用接口等等
首先，看效果
image.png
引入方式
一、外链形式引入
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
二、npm命令安装
npm install eruda --save
在main.js里面引入，或者在你需要的页面按需引入也是可以的
import eruda from 'eruda/eruda.min.js' // 测试工具
eruda.init() // eruda初始化
eruda 它没有在PC端这么直观，因为在移动端展示的方式局限性，但是总比一个个写alert强，alert还容易一不小心带到线上。好了现在来说下打开之后展示的小导航栏，功能清单，看图就是它了
image.png
Console
这个就不用多说了大家都懂，就是我们在控制台打印的东西
Elements
它能把每一个父节点下的每一个子节点全部列出来；你点击某个子节点时，列出当前节点全部的属性、样式、盒子模型等
查看标签内容及属性；查看Dom上的样式；支持页面元素高亮；支持屏幕直接点击选取；查看Dom上绑定的各类事件。
甚至也能使用Plugins 插件，做到跟PC端一样，形成 dom tree；
image.png
Network
这个大家也很熟了，pc端经常看调用接口的地方。能捕获请求，查看发送数据、返回头、返回内容等信息。特别是前端传的参数能够在这边对，要不然老是被后端说参数少了，手机上不知道在哪查。Network 能很直接明了的看到你请求带了什么。
image.png
Resources（Application + Source 结合体）
能查看 Cookie、localStorage、sessionStorage等信息，并且还能执行清除操作（Application）；还能查看当前页面加载脚本及样式文件；查看页面加载过的图片等资源（Source）；
Sources/Info
Sources：查看页面源码；格式化html，css，js代码及json数据。
Info：主要输出URL信息及User Agent；及其他的一些手机系统信息，同时也支持自定义输出内容哦。
Settings
可以配置一些自己想要的功能
网友评论