🛠 推荐一款带着出去玩也能查看样式的mini Chrome de

作者: Cc卿 | 来源:发表于2018-06-05 19:21 被阅读8次

🛠 推荐一款带着出去玩也能查看样式的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的链接，各位客官可以点击玩一下；

先贴一个主要的代码图：