【亚洲必赢官网】Chrome插件及其余,Web前端开发人士实用Chrome插件收集

Chrome开发者工具不完全指南(六、插件篇)

2015/07/13 · CSS,
HTML5,
JavaScript ·
Chrome,
插件

原稿出处:
卖烧烤夫斯基   

本篇是Chrome开发者工具的结尾篇,最终为大家介绍五款功效强大的插件。在chrome商店里面有为数不少插件,没事指出大家去逛逛。但是必要FQ,所以诸位请自备神器。

一、皮肤插件

先是是豪门期盼已久,翘首以盼的皮层插件。那款插件叫DevTools Theme: Zero
Dark Matrix.在信用社中下载之,然后打开这么些地方:chrome://flags,找到Enable
Developer Tools experments
(可以查找experments关键字急忙锁定之)勾选启用复选框。重启浏览器,打开开发者选项,点击小齿轮,能够观察Experments这选项,接纳后在弹出面板中勾选
Allow custom UI themes,重启浏览,然后看到:

亚洲必赢官网 1

高达上的皮肤就是那般出来滴。据说还有好多办法可以转移,可是露珠近期就用的事那种格局。有趣味的同班可以去摸索看。

二、Performance-Analyser(网页品质分析)
那款插件是用来分析你的网页加载品质的,包含http请求,执行期的时刻,以及每种http请求文件的轻重缓急,占比。首先下载之,随意打开一个界面,按下插件图标,可以见见分析页面:

亚洲必赢官网 2

您可以行使那款插件来分析你的界面资源加载的共同体意况,并试着做一些优化和调动。

三、(FeHelper)WEB前端帮手
那款插件包含了一多重功能,很充足。是国人开发的,成效包含:json格式化,html格式化,二维码生成,编码规范检测等等一种类。当你在浏览器中打开一个后台接口的时候,如果该接口再次回到的是json字符串,那么它会活动将其格式化。上边是它的片段职能列表,不具体一一示范:

亚洲必赢官网 3

四、POSTMAN
该插件是效仿发送请求的,后台和前台开发人士都足以用到。它是一个简化版的fiddler,效用尽管尚无它强大,然则界面胜之,操作性也胜之,还有标准的API,更新也一直在三番五次。所以用之有木有:

亚洲必赢官网 4

五、Visual Event

网页事件监听,能帮您捕获到近来网页上的逐一要素的轩然大波监听境况。打开一个界面,按下增加按钮:

亚洲必赢官网 5

把鼠标放到有背景观的要素上去,能够看看它们的时日来源和绑定的函数。对于部分简易的事件检测或者蛮有用的。比较复杂的就没怎么卵用了。

六、二维码扫描

其一意义对手机支付来说依旧不错的。扫一扫就在浏览器中打开了。在FF浏览器中自带的职能,对于Chrome来说怎么可以木有呢?可是这意义太不难,太低档次,太多了(然而很有用)。就不上图了。

七、WhatFont

找到网页的书体。开启成效后把鼠标停留在文书上,会弹出该字体名称。所以你可以据此copy你喜爱的字体啦。

八、Speed Tracer

本条是一个精锐版本的属性分析器,比Profiles还强大。可以跟踪事件,查看css样式,找到js中内存败露,检测js语法。成效之强大,一枝独秀!Speed
Tracer是一款很强劲的网页质量分析工具,通过它你可以找到您的网页运行缓慢的缘故。针对它们改良网站。可是因为它的作用强大,所以操作比较复杂。篇幅原因露珠不做牵线。感兴趣的同室可以友善去捉摸捉摸。上边是盗图一张:

亚洲必赢官网 6

结束语、

到此甘休,露珠的Chrome开发者工具不完全指南体系发表终结,露珠通过了六篇博文,向各位比较想尽地介绍了chrome开发者工具的作用利用。从基础的dom查找到品质分析,大体上涵括了前端开发的种种方面。在前日前端开发日益复杂的方向下,了解了几件好的工具,是足以可以一石两鸟的。而chrome毫无疑问的是那些好工具中的一个。讲到那里露珠想到《庄子》里面的一个故事:有一天尼父的学生子贡经过一块菜畦,看到有一位老年人为了浇水而打了一条通往水井的大好,然后抱着水瓮来回于水井和菜畦之间,为的是给菜畦浇水。子贡见了就对老人说这么打水太累,为啥不和谐做一个打水的机器呢?种菜的父老说:“有机械之事者必有机心。机心存与胸,大道不载也”。意思是有了偷懒的心,人就变得懒,那不是人的个性,也不是天的秉性,所以大道也就不会追加他的心迹。其实露珠想说利用工具和偷懒或机心是三遍事儿,时代在扭转,人类曾经不再是刀耕火种的人类了,倘使一向停在旧的一世,跟不到新时代的提升,不学会与时俱进那样唯有被历史淘汰。那跟我们前些天处的条件是同一的,尤其是前端开发,技术更新跟翻书一样快,隔三差五的新框架出现,几年的时间就有一大堆新鲜的东西跳将出来把你们吓一跳,不仅仅开发的时日在增加,学习的本金也在不停增添,所以时间变得越来越不菲。倘使有好的工具得以在少付出的景况下为大家完结平等的目标,何乐而不为呢?毕竟大家的靶子都如出一辙,只是殊途同归罢了。当然,庄周是墨家人物,借个故事来奚弄道家也是自然,以偏概全依然卓殊滴哈。

1 赞 14 收藏
评论

亚洲必赢官网 7

更加多的前端开发人口喜欢在Chrome里开发调试代码,Chrome有诸多名特优的插件可以扶助前端开发人士极大的增高工作作用。越发Chrome本身是能够登录的,登录后您抱有的插件都会自动同步到每一个签到后的Chrome的,极度有利于啊。

本文为总卷的分页,内容是一致的,只是为了便于查阅,总卷内容较多。

越是多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有不少理想的插件可以协助前端开发人员极大的增长工作效用。尤其Chrome本身是足以登录的,登录后你有着的插件都会自动同步到每一个签到后的Chrome的,万分有利啊。

Postman – REST Client

Postman是Ajax开发的神器,对于Restful开发形式尤其有支持,可以用来效仿各个请求来测试API的正确,比如用来效仿Ajax请求。它还协理认证,比如简单的用户名/密码,或者Oauth1.0。Rest
Console也是一个毋庸置疑的选项。

【亚洲必赢官网】Chrome插件及其余,Web前端开发人士实用Chrome插件收集。前端开发真的是离不开Chrome插件,找到一个好的插件,对页面开发流畅性有很大的赞助。基于Chrome插件的基本点,评分都会高一些,其他门类较少的工具暂时放在这一类,前边扩充再做分类。

Postman – REST Client

Postman是Ajax开发的神器,对于Restful开发情势尤其有赞助,可以用来模拟各类请求来测试API的正确性,比如用来模拟Ajax请求。它还支持认证,比如简单的用户名/密码,或者Oauth1.0。Rest
Console也是一个不利的挑选。

Edit This Cookie

那是一个强有力的cookie管理器。你可以拉长、删除、编辑、搜索、尊敬和阻挠cookies。Cookies也是一个百般强大的Cookie工具。

总卷地址

Edit This Cookie

那是一个强有力的cookie管理器。你可以加上、删除、编辑、搜索、爱抚和阻挠cookies。Cookies也是一个很是强劲的Cookie工具。

Web Developer

安装Web
Developer增加后,会在浏览器的工具栏中添加一个按钮,点击该按钮,会弹出各样Web开发工具。此扩展工具的小编同时也是那多少个流行的Firefox扩张Web
Developer extension for Firefox的撰稿人。。

评星说明:
☆               知道有这个就好
☆☆             了解下会很有帮助
☆☆☆           开发常用,提升效率
☆☆☆☆         可以对开发效率有益,效果斐然
☆☆☆☆☆       神器,不知道你就亏大了
内容简介:包含界面设计,页面切图,网页布局。
2017-10-25  [4c026446f2fb]推荐

Web Developer

设置Web
Developer伸张后,会在浏览器的工具栏中添加一个按钮,点击该按钮,会弹出各个Web开发工具。此扩充工具的撰稿人同时也是卓殊流行的Firefox扩大Web
Developer extension for Firefox的小编。。

JSON Lint

一个在线验证和格式化JSON文件的运用。

Chrome 插件「链接已补上」

JSON Lint

一个在线验证和格式化JSON文件的应用。

网页截图

截取网页为图片,协理窗口截图,区域截图和全方位网页截图两种方式。援救水平和垂直翻页截取超大网页,新版引进自动截图保存功能。截图后,能够利用图片编辑工具编辑图片,然后将编制后的图纸保存为PNG格式的图纸文件,并且提供了高亮工具,涂改工具和文字添加工具。

  • 插件介绍
    • FeHelper「WEB前端助手内容很多很全,很有协理」☆☆☆☆☆
    • Ripple Emulator
      (Beta)「移动端调试」☆☆☆
    • The Great
      Suspender「Chrome页面打开太多,将不常查看页面休眠」☆☆☆
    • Viewport
      Resizer「测试不一致显示屏下效果,0-1960像素」☆☆☆
    • WhatRuns「查看页面所利用技术框架」☆☆☆
    • 捕捉网页截图 –
      FireShot「可将超出可视区的百分之百页面举行截图」☆☆☆
    • ColorZilla「页面颜色取色」☆☆☆
    • POSTMAN「模拟发送请求」☆☆☆
    • Visual
      Event「网页事件监听」☆☆☆
    • 二维码扫描「插件比较多,可机关检索」☆☆☆
    • WhatFont「找到网页的字体」☆☆
    • Speed
      Tracer「」
  • 资源平台
    • Chrome插件下载宗旨
      「有Web开发项目,资源较多,点进详情有大致的插件介绍」[4c026446f2fb网友推荐]☆☆☆

网页截图

截取网页为图片,帮衬窗口截图,区域截图和全体网页截图三种办法。帮忙水平和垂直翻页截取超大网页,新版引进自动截图保存作用。截图后,可以选拔图片编辑工具编辑图片,然后将编辑后的图形保存为PNG格式的图样文件,并且提供了高亮工具,涂改工具和文字添加工具。

YSlow

YSlow可以分析网页,并为改革网页质量提议修改提出,那么些成效基于高性能网页的规则集。YSlow能够按照预订义的多个规则集或用户自定义规则集来对网页举行个别。,PageSpeed
Insights是谷歌支付的近乎意义的插件。

其他

  • Browsers「实用的浏览器沙箱,不用下载可使用想测试的浏览器」☆☆☆☆☆
  • Pingdom「测试网站的加载时间,并分析,帮衬您找出瓶颈」☆☆
  • Loads.in「测试网站的加载时间」☆☆
  • HTML5
    Test「HTML5特征包容性」☆☆
  • 奇云测「页面环球服务器加载速度,与质量评分」☆☆☆

YSlow

YSlow可以分析网页,并为改进网页品质提议修改指出,这么些职能基于高质量网页的规则集。YSlow可以按照预约义的四个规则集或用户自定义规则集来对网页举行分级。,PageSpeed
Insights是谷歌(Google)开发的近乎作用的插件。

ColorZilla

能够从页面上别的一点获取颜色,维护获取历史等。

ColorZilla

可以从页面上另外一点取得颜色,维护获取历史等。

Measure It!

MeasureIt! 给您测量一个网站中的任何因素的尺码(像素宽度和可观)。 Page
Ruler亚洲必赢官网 ,也是一个不易的取舍。

Measure It!

MeasureIt! 给您测量一个网站中的任何因素的尺寸(像素宽度和高度)。 Page
Ruler也是一个不利的选拔。

JavaScript Errors Notifier

安装该扩张后,会在Chrome地址栏中以图标方式提醒JavaScript不当,因为Chrome默许唯有打开console才会呈现错误。

JavaScript Errors Notifier

安装该伸张后,会在Chrome地址栏中以图标情势提醒JavaScript错误,因为Chrome默许唯有开拓console才会彰显错误。

Window Resizer

此扩张可以调动浏览器窗口的尺寸,以适应各个显示屏分辨率。那对于Web设计师和开发者卓殊有用,可以接济她们在差别的显示屏分辨率下测试网站布局。

Window Resizer

此扩展可以调动浏览器窗口的分寸,以适应种种屏幕分辨率。这对于Web设计师和开发者相当有用,可以扶助他们在不一样的屏幕分辨率下测试网站布局。

Firebug Lite

Firebug的精简版允许你检查的HTML,CSS和JavaScript代码,生活在别的页面。 你也可以编制代码,立时测试新的更动。 这是一个开发者最欣赏的Firefox扩大Firebug的精简版。

Firebug Lite

Firebug的精简版允许你检查的HTML,CSS和JavaScript代码,生活在其他页面。 你也足以编制代码,马上测试新的生成。 那是一个开发者最喜爱的Firefox伸张Firebug的精简版。

JQuery 扩展

jQuery扩展让你在当前网页中运行JavaScript和jQuery命令。

JQuery 扩展

jQuery伸张让你在当前网页中运行JavaScript和jQuery命令。

Pretty Beautiful Javascript

该扩充可以使Javascript文件更便于阅读。其重组了Beautifier和Prettify的功力,可以为代码添加语法高亮。用法是在新窗口里输入js文件的URL或者在查阅HMTL源代码时点击js文件的链接。要是是在Chrome的决定台里的资源选项里查看代码则援引使用Chrome自带的”pretty
print”效能,也就是点击”{ }”图标。

Pretty Beautiful Javascript

该扩张可以使Javascript文件更便于阅读。其重组了Beautifier和Prettify的效能,可以为代码添加语法高亮。用法是在新窗口里输入js文件的URL或者在查阅HMTL源代码时点击js文件的链接。假诺是在Chrome的支配台里的资源选项里查看代码则援引使用Chrome自带的”pretty
print”效能,也就是点击”{ }”图标。

WhatFont

用来查看当前页面使用了怎样字体,Firebug和Webkit
Inspector也足以查阅字体,不过远没有WebFont方便,WebFont可以经过把鼠标悬停在要素上来查看字体。同时还协理查看网络字体,如Typekit 和Google
Font API。

WhatFont

用以查看当前页面使用了怎样字体,Firebug和Webkit
Inspector也得以查阅字体,不过远没有WebFont方便,WebFont可以经过把鼠标悬停在要素上来查看字体。同时还协助查看互联网字体,如Typekit 和 Google
Font API。

IE Tab

在Chrome中开拓IE浏览器标签页,你可以打开一个标签来运作Internet
Explorer,让你见到的网页在IE浏览器看起来何等。

IE Tab

在Chrome中开辟IE浏览器标签页,你可以打开一个标签来运作Internet
Explorer,让您看到的网页在IE浏览器看起来何等。

参考文献

10个针对Web开发者的雅观Chrome插件

如需转发,请声明来源: BorisHuai前端修炼 > Web前端开发人士实用Chrome插件收集

网站地图xml地图