推荐一款带着出去玩也能查看样式的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. 按钮拖拽,面板透明度大小设置。
  2. Console面板:捕获Console日志,支持log、error、info、warn、dir、time/timeEnd、clear、count、assert、table;支持占位符,包括%c自定义样式输出;支持按日志类型及正则表达式过滤;支持快捷命令加载underscore、jQuery库;支持JavaScript脚本执行。
  3. Elements面板:查看标签内容及属性;查看应用在Dom上的样式;支持页面元素高亮;支持屏幕直接点击选取;查看Dom上绑定的各类事件。
  4. Network面板:捕获请求,查看发送数据、返回头、返回内容等信息。
  5. Resources面板:查看并清除localStorage、sessionStorage及cookie;查看页面加载脚本及样式文件;查看页面加载图片。
  6. Sources面板:查看页面源码;格式化html,css,js代码及json数据。
  7. Info面板:输出URL及User Agent;支持自定义输出内容。
  8. Snippets面板:页面元素添加边框;加时间戳刷新页面;支持自定义代码片段。

📱经过一番操作之后发现是很容易上手的,可以往下看;

2、安装到试验

2.1、如何安装?

1、通过CDN,直接作为js脚本插入到需要测试的页面中来;

1
2
<script src="//cdn.bootcss.com/eruda/1.4.2/eruda.min.js"></script>
<script>eruda.init();</script>

2、在页面的根目录直接通过npm安装模块,然后在srcipt中引入;

npm install eruda --save

1
2
<script src="node_modules/eruda/eruda.min.js"></script>
<script>eruda.init();</script>

嗯嗯,对的,根据上面可以直接填写在页面中来,下面会给出demo的演示:

2.2可以对erude进行自定义的编写:

主要是可以根据自己所需要的dev功能进增加和删减。像「控制台」「network」「元素」等等都可以按照自己的需求对其进行删减或者增加。

1
2
3
4
5
6
7
8
var el = document.createElement('div');
document.body.appendChild(el);

eruda.init({
container: el,
tool: ['console', 'elements'],
useShadowDom: true
});

三、个人demo演示

🛠 文末有我做的demo的链接,各位客官可以点击玩一下;
先贴一个主要的代码图:
主要关于一下js脚本标签那里对「erude」的引入:

这份代码主要的页面在PC端如下(在后面的几篇文章里,这个表单页面将作为主要的前端页面作为展示):

再贴一份在手机上演示的gif图:

直接是个别功能的屏幕截图:

图1

图二

图3

图4

💡让dev调试台调出的按钮是那个小小的齿轮⚙️
个人使用之后的感受:
也可以在上面console上输出js语句,但是暂时还无法去修改dom样式表,觉得唯一这个不太好。
demo的一个链接:http://wusiqing.com/webTest/doit/form_demo/index.html 粗略讲了一下关于「erude」的使用,

希望觉得不错的同学,还请点个赞👍
多多支持哈!