神刀安全网

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

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

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

一、简述

之前在上一篇文章有涉及到关于移动端样式查看和调试,文章传送门:http://wusiqing.com/?p=231

作为一名前端程序员,很多时候我们需要去修改页面的样式,(⚠️这里不搞PC端的,只说说关于移动端的),当我们去修改前端页面的时候,我们有很多种方式去修改,去完成,前提是我们得要坐在电脑前;就是又一种情况就是,我们出去玩,我作为一个在校学生,有些时候空闲的时候回去做一些demo,会接一点小外包,锻炼一下业务能力,但是有时候出去玩,或者出去吃饭的时候,📲可能由于各种原因,移动端样式出现问题了,需要立即查看样式出现错误的原因,但是我们不可能立即回到电脑前,这时候如何 优雅地装逼 方便去查看样式呢?

💡em….最近发现了一款有趣的移动端的mini版的Chrome dev,github上的star 足足有3k+,名字叫做「erude」这款插件在某种程度上能让你达到装逼的效果 很好地解决这个问题🤫

二、简单演示

em…这款插件readme.md很骚气,怎么样骚气,看👇👇👇👇👇👇👇👇👇

💡第一时间吸引了我的注意力👇👇👇👇👇👇👇👇👇

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

看到这个的时候,第一时间就想到「技术宅拯救世界」!「百分百是个宅男」!

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();

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

从自己博客截下来的图

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

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

从自己博客截下来的图

            嗯嗯,对的,根据上面可以直接填写在页面中来,下面会给出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的链接,各位客官可以点击玩一下;

         先贴一个主要的代码图:

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

        主要关于一下js脚本标签那里对「erude」的引入:

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

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

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

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

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

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

pic1

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

pic2

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

pic3

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

        💡让dev调试台调出的按钮是那个小小的齿轮⚙️

        个人使用之后的感受:

        也可以在上面console上输出js语句,但是暂时还无法去修改dom样式表,觉得唯一这个不太好。

        demo的一个链接:http://wusiqing.com/webTest/doit/form_demo/index.html

        粗略讲了一下关于「erude」的使用,

        希望觉得不错的同学,还请点个赞👍

        多多支持哈!

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 🛠 推荐一款带着出去玩也能查看样式的mini Chrome dev

分享到:更多 ()