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

推荐一款带着出去玩也能查看样式的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样式表，觉得唯一这个不太好。

作者：Cc卿
链接：https://www.jianshu.com/p/a52b8eaa5aad