Chrome插件及其余,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插件,找到一个好的插件,对页面开发流畅性有很大的援救。基于Chrome插件的机要,评分都会高一些,其余品种较少的工具暂时放在这一类,前边增添再做分类。

Postman – REST Client

Chrome插件及其余,Chrome开发者工具不完全指南。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文件的UHavalL或然在翻看HMTL源代码时点击js文件的链接。假若是在Chrome的控制台里的资源选项里查看代码则援引应用Chrome自带的”pretty
print”功用,相当于点击”{ }”图标。

Pretty Beautiful Javascript

该扩张可以使Javascript文件更易于阅读。其构成了Beautifier美高梅开户网址,和Prettify的功效,可以为代码添加语法高亮。用法是在新窗口里输入js文件的U君越L恐怕在查阅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地图