🛠 推荐一款带着出去玩也能查看样式的mini Chrome dev
一、简述
之前在上一篇文章有涉及到关于移动端样式查看和调试，文章传送门：http://wusiqing.com/?p=231
作为一名前端程序员，很多时候我们需要去修改页面的样式，（⚠️这里不搞PC端的，只说说关于移动端的），当我们去修改前端页面的时候，我们有很多种方式去修改，去完成，前提是我们得要坐在电脑前；就是又一种情况就是，我们出去玩，我作为一个在校学生，有些时候空闲的时候回去做一些demo，会接一点小外包，锻炼一下业务能力，但是有时候出去玩，或者出去吃饭的时候，📲可能由于各种原因，移动端样式出现问题了，需要立即查看样式出现错误的原因，但是我们不可能立即回到电脑前，这时候如何 优雅地装逼 方便去查看样式呢？
💡em….最近发现了一款有趣的移动端的mini版的Chrome dev，github上的star 足足有3k+，名字叫做「erude」这款插件在某种程度上能让你达到装逼的效果 很好地解决这个问题🤫
二、简单演示
em…这款插件readme.md很骚气，怎么样骚气，看👇👇👇👇👇👇👇👇👇
💡第一时间吸引了我的注意力👇👇👇👇👇👇👇👇👇
看到这个的时候，第一时间就想到「技术宅拯救世界」！「百分百是个宅男」！
1、大概说一下Erude.
根据介绍说：
Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等等。
功能清单：
按钮拖拽，面板透明度大小设置。
1.Console面板：捕获Console日志，支持log、error、info、warn、dir、time/timeEnd、clear、count、assert、table；支持占位符，包括%c自定义样式输出；支持按日志类型及正则表达式过滤；支持快捷命令加载underscore、jQuery库；支持JavaScript脚本执行。
2.Elements面板：查看标签内容及属性；查看应用在Dom上的样式；支持页面元素高亮；支持屏幕直接点击选取；查看Dom上绑定的各类事件。
3.Network面板：捕获请求，查看发送数据、返回头、返回内容等信息。
4.Resources面板：查看并清除localStorage、sessionStorage及cookie；查看页面加载脚本及样式文件；查看页面加载图片。
5.Sources面板：查看页面源码；格式化html，css，js代码及json数据。
6.Info面板：输出URL及User Agent；支持自定义输出内容。
7.Snippets面板：页面元素添加边框；加时间戳刷新页面；支持自定义代码片段。
📱经过一番操作之后发现是很容易上手的，可以往下看；
2、安装到试验
2.1、如何安装？
1、通过CDN，直接作为js脚本插入到需要测试的页面中来；
eruda.init();eruda.init();
从自己博客截下来的图
2、在页面的根目录直接通过npm安装模块，然后在srcipt中引入；
从自己博客截下来的图
嗯嗯，对的，根据上面可以直接填写在页面中来，下面会给出demo的演示：
2.2可以对erude进行自定义的编写：
主要是可以根据自己所需要的dev功能进增加和删减。像「控制台」「network」「元素」等等都可以按照自己的需求对其进行删减或者增加。
var . el=document.createElement(‘div’);
document.body.appendChild(el);
eruda.init({
container:el,
tool: [‘console’,’elements’],
useShadowDom:true
});
三、个人demo演示
🛠 文末有我做的demo的链接，各位客官可以点击玩一下；
先贴一个主要的代码图：
主要关于一下js脚本标签那里对「erude」的引入：
这份代码主要的页面在PC端如下（在后面的几篇文章里，这个表单页面将作为主要的前端页面作为展示）：
再贴一份在手机上演示的gif图：
直接是个别功能的屏幕截图：
pic1
pic2
pic3
💡让dev调试台调出的按钮是那个小小的齿轮⚙️
个人使用之后的感受：
也可以在上面console上输出js语句，但是暂时还无法去修改dom样式表，觉得唯一这个不太好。
demo的一个链接：http://wusiqing.com/webTest/doit/form_demo/index.html
粗略讲了一下关于「erude」的使用，
希望觉得不错的同学，还请点个赞👍
多多支持哈！
