您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:推荐几个Web前端开发实用的Chrome插

新葡亰496net:推荐几个Web前端开发实用的Chrome插

发布时间:2019-09-11 10:50编辑:新葡亰官网浏览(193)

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

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

    初稿出处: 卖BBQ夫斯基   

    本篇是Chrome开拓者工具的结尾篇,最终为大家介绍三款功用庞大的插件。在chrome店铺里面有非常多插件,没事提出大家去逛逛。但是供给FQ,所以诸位请自备神器。

    一、皮肤插件

    第一是大家期盼已久,翘首以盼的皮层插件。那款插件叫DevTools Theme: Zero Dark Matrix.在集团中下载之,然后张开这几个地方:chrome://flags,找到Enable Developer Tools experments (能够查找experments关键字急速锁定之)勾选启用复选框。重启浏览器,打开开垦者选项,点击小齿轮,可以看来Experments那选项,选取后在弹出面板中勾选 Allow custom UI themes,重启浏览,然后看到:

    新葡亰496net 1

    高达上的皮层正是那般出来滴。传闻还恐怕有众多主意能够改换,可是露珠这段时间就用的事这种措施。有意思味的同窗能够去查究看。

    二、Performance-Analyser(网页品质分析)
    那款插件是用来深入分析你的网页加载质量的,满含http央求,实行期的年月,以及每一个http央求文件的分寸,占比。首先下载之,随便展开三个分界面,按下插件图标,能够见见深入分析页面:

    新葡亰496net 2

    您能够动用那款插件来分析你的分界面财富加载的总体情形,并试着做一些优化和调动。

    三、(FeHelper)WEB前端帮手
    那款插件包涵了一文山会海效率,很丰盛。是国人开拓的,功效富含:json格式化,html格式化,二维码生成,编码标准检查测量检验等等一连串。当您在浏览器中开采五个后台接口的时候,假使该接口重临的是json字符串,那么它会自行将其格式化。上面是它的一对效果与利益列表,不现实一一示范:

    新葡亰496net 3

    四、POSTMAN
    该插件是效仿发送伏乞的,后台和前台开辟人士都得以用到。它是二个简化版的fiddler,作用固然并没有它壮大,然则分界面胜之,操作性也胜之,还恐怕有专门的学业的API,更新也直接在接二连三。所以用之有木有:

    新葡亰496net 4

    五、Visual Event

    网页事件监听,能帮您捕获到日前网页上的各种要素的风云监听情况。张开贰个分界面,按下扩充按键:

    新葡亰496net 5

    把鼠标放到有背景象的因素上去,能够见见它们的岁月来源和绑定的函数。对于一些简易的平地风波检验大概蛮有用的。相比复杂的就没怎么卵用了。

    六、二维码扫描

    其一功效对手提式有线电话机支付来说依然不错的。扫一扫就在浏览器中开发了。在FF浏览器中自带的效劳,对于Chrome来说怎么能够木有呢?但是这意义太轻巧,太低级次,太多了(然而很有用)。就不上图了。

    新葡亰496net:推荐几个Web前端开发实用的Chrome插件,Chrome开发者工具不完全指南。七、WhatFont

    找到网页的字体。开启功用后把鼠标停留在文件上,会弹出该字体名称。所以您可感到此copy你欢跃的书体啦。

    八、Speed Tracer

    那个是三个强有力版本的习性深入分析器,比Profiles还会有力。能够追踪事件,查看css样式,找到js中内部存款和储蓄器败露,质量评定js语法。功效之庞大,天下无双!Speed Tracer是一款很庞大的网页品质深入分析工具,通过它你能够找到你的网页运转缓慢的原因。针对它们改正网站。不过因为它的功效庞大,所以操作相比较复杂。篇幅原因露珠不做牵线。感兴趣的同窗能够团结去捉摸捉摸。下边是盗图一张:

    新葡亰496net 6

    结束语、

    到此甘休,露珠的Chrome开辟者工具不完全指南体系宣布终结,露珠通过了六篇博文,向各位比较想尽地介绍了chrome开辟者工具的效果利用。从基础的dom查找到质量剖析,大要上涵括了前端开拓的各样方面。在现行前端开采日益复杂的矛头下,了解了几件好的工具,是足以能够一举两得的。而chrome确实无疑的是那一个好工具中的叁个。讲到这里露珠想到《庄子休》里面包车型客车一个传说:有一天孔仲尼的学生子贡经过一块菜畦,看到有一人老汉为了浇水而打了一条通往水井的可观,然后抱着水瓮来回于水井和菜畦之间,为的是给菜畦浇水。子贡见了就对中年老年年人说这么打水太累,为什么不友善做贰个打水的机器呢?种菜的老人说:“有机械之事者必有机心。机心存与胸,大道不载也”。意思是有了偷懒的心,人就变得懒,那不是人的秉性,亦非天的特性,所以大道也就不会大增他的内心。其实露珠想说利用工具和偷懒或机心是三次事儿,时代在退换,人类已经不再是刀耕火种的人类了,如若直接停在旧的不时,跟不到新时期的进化,不学会与时俱进那样独有被历史淘汰。那跟大家未来处的景况是同等的,特别是前端开垦,技巧创新跟翻书同样快,时有时无的新框架出现,几年的岁月就有一大堆新鲜的东西跳将出来把你们吓一跳,不止开拓的时刻在追加,学习的资金财产也在不停扩大,所以时间变得越发不菲。假设有好的工具得以在少付出的景况下为大家完成平等的指标,何乐而不为呢?毕竟大家的目的都千篇一律,只是异曲同工罢了。当然,庄子休是道亲属物,借个传说来嘲弄墨家也是本来,望文生义依然极度滴哈。

    1 赞 14 收藏 评论

    新葡亰496net 7

    更加的多的前端开采人口喜欢在Chrome里开荒调节和测量检验代码,Chrome有比相当多大好的插件能够帮助前端开荒人士非常的大的增高级程序猿作成效。极度Chrome自身是可以登陆的,登陆后您全部的插件都会自行同步到各样记名后的Chrome的,特别有助于啊。

    正文为总卷的分页,内容是完全一样的,只是为着便利查阅,总卷内容比较多。

    一发多的前端开垦人士喜欢在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

    Postman是Ajax开采的神器,对于Restful开采格局非常有救助,能够用来效仿种种央浼来测量检验API的准确性,比如用来模拟Ajax诉求。它还支持认证,举例轻易的顾客名/密码,恐怕Oauth1.0。Rest Console也是叁个不利的精选。

    Postman - REST Client

    Edit This Cookie

    那是三个强有力的cookie处理器。你能够加上、删除、编辑、寻觅、尊敬和阻挠cookies。Cookies也是八个可怜有力的Cookie工具。

    总卷地址

    Edit This Cookie

    那是三个强硬的cookie处理器。你能够加上、删除、编辑、找寻、尊敬和拦阻cookies。Cookies也是贰个百般有力的Cookie工具。

    Postman是Ajax开采的神器,对于Restful开辟格局特别有援救,能够用来效仿各类需要来测量检验API的精确性,举个例子用来模拟Ajax哀告。它还帮衬认证,举例容易的客户名/密码,可能Oauth1.0。Rest Console也是两个不错的选料。

    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的撰稿人。。

    Edit This Cookie

    JSON Lint

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

    Chrome 插件「链接已补上」

    JSON Lint

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

    那是一个强硬的cookie管理器。你可以加上、删除、编辑、寻找、珍重和拦阻cookies。Cookies也是多少个万分强大的库克ie工具。

    网页截图

    截取网页为图片,辅助窗口截图,区域截图和全体网页截图三种方法。协理水平和垂直翻页截取超大网页,新版引入自动截图保存功用。截图后,能够利用图片编辑工具编辑图片,然后将编写制定后的图形保存为PNG格式的图形文件,况且提供了高亮工具,涂改工具和文字增多工具。

    • 插件介绍
      • FeHelper「WEB前端助手内容相当多很全,很有支持」☆☆☆☆☆
      • Ripple Emulator (Beta)「移动端调节和测量检验」☆☆☆
      • The Great Suspender「Chrome页面张开太多,将有的时候查看页面休眠」☆☆☆
      • Viewport Resizer「测量试验分裂显示器下效果,0-一九五九像素」☆☆☆
      • WhatRuns「查看页面所选用才具框架」☆☆☆
      • 捕捉网页截图 - FireShot「可将超越可视区的整个页面进行截图」☆☆☆
      • ColorZilla「页面颜色取色」☆☆☆
      • POSTMAN「模拟发送央浼」☆☆☆
      • Visual Event「网页事件监听」☆☆☆
      • 二维码扫描「插件比相当多,可活动物检疫索」☆☆☆
      • WhatFont「找到网页的书体」☆☆
      • Speed Tracer「」
    • 能源平台
      • Chrome插件下载中央 「有Web开辟品种,财富比较多,点进详细的情况有简要的插件介绍」[4c026446f2fb网上好朋友推荐]☆☆☆

    网页截图

    截取网页为图片,协助窗口截图,区域截图和全部网页截图二种办法。扶助水平和垂直翻页截取超大网页,新版引入自动截图保存功效。截图后,能够采纳图片编辑工具编辑图片,然后将编辑后的图形保存为PNG格式的图样文件,并且提供了高亮工具,涂改工具和文字加多工具。

    Web Developer

    YSlow

    YSlow能够深入分析网页,并为改革网页质量建议修改提出,这一个效应基于高品质网页的条条框框集。YSlow能够依据预订义的八个法则集或用户自定义法规集来对网页举行独家。,PageSpeed Insights是谷歌(Google)费用的近乎意义的插件。

    其他

    • Browsers「实用的浏览器沙箱,不用下载可选择想测验的浏览器」☆☆☆☆☆
    • Pingdom「测量检验网址的加载时间,并深入分析,帮助你寻找瓶颈」☆☆
    • Loads.in「测量检验网址的加载时间」☆☆
    • HTML5 Test「HTML5表征包容性」☆☆
    • 奇云测「页面满世界服务器加载速度,与性子评分」☆☆☆

    YSlow

    YSlow可以分析网页,并为改革网页品质提议修改建议,这么些功用基于高质量网页的条条框框集。YSlow能够依据预定义的八个法则集或客商自定义法则集来对网页举行独家。,PageSpeed Insights是谷歌(Google)开荒的邻近功用的插件。

    设置Web Developer扩张后,会在浏览器的工具栏中增加贰个按键,点击该开关,会弹出种种Web开荒工具。此扩张工具的撰稿人同时也是十二分流行的Firefox扩展Web Developer extension for Firefox的撰稿人。。

    ColorZilla

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

    ColorZilla

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

    JSON Lint

    Measure It!

    MeasureIt! 给你衡量叁个网址中的任何因素的尺寸(像素宽度和惊人)。 Page Ruler也是贰个不利的挑选。

    Measure It!

    MeasureIt! 给你衡量叁个网址中的任何因素的尺寸(像素宽度和高度)。 Page Ruler也是贰个科学的选项。

    三个在线验证和格式化JSON文件的行使。

    JavaScript Errors Notifier

    安装该扩大后,会在Chrome地址栏中以Logo情势提示JavaScript谬误,因为Chrome暗许唯有开辟console才会呈现错误。

    JavaScript Errors Notifier

    设置该扩张后,会在Chrome地址栏中以Logo情势提示JavaScript错误,因为Chrome私下认可唯有张开console才会显示错误。

    网页截图

    Window Resizer

    此扩张能够调治浏览器窗口的分寸,以适应各类荧屏分辨率。这对于Web设计员和开荒者非常有用,能够辅助他们在不一样的显示屏分辨率下测量试验网址布局。

    Window Resizer

    此扩充能够调治浏览器窗口的大大小小,以适应各类显示屏分辨率。那对于Web设计员和开荒者特别有用,能够帮衬他们在区别的显示屏分辨率下测量检验网址布局。

    截取网页为图片,援救窗口截图,区域截图和整个网页截图二种艺术。支持水平和垂直翻页截取超大网页,新版引入自动截图保存成效。截图后,能够运用图片编辑工具编辑图片,然后将编写制定后的图样保存为PNG格式的图片文件,而且提供了高亮工具,涂改工具和文字增加工具。

    Firebug Lite

    Firebug的精简版允许你检查的HTML,CSS和JavaScript代码,生活在别的页面。 你也能够编写制定代码,立时测验新的生成。 那是二个开拓者最欣赏的Firefox扩充Firebug的精简版。

    Firebug Lite

    Firebug的精简版允许你检查的HTML,CSS和JavaScript代码,生活在其它页面。 你也能够编写代码,立时测量检验新的改变。 那是三个开辟者最欣赏的Firefox扩充Firebug的精简版。

    YSlow

    JQuery 扩展

    jQuery扩大令你在当前网页中运作JavaScript和jQuery命令。

    JQuery 扩展

    jQuery扩大令你在当前网页中运作JavaScript和jQuery命令。

    YSlow可以分析网页,并为改进网页品质建议修改建议,那一个职能基于高品质网页的准绳集。YSlow能够依赖预约义的四个准绳集或客户自定义法则集来对网页进行分级。,PageSpeed Insights是Google支付的好像成效的插件。

    Pretty Beautiful Javascript

    该增添能够使Javascript文件更易于阅读。其重组了Beautifier和Prettify的效果,可以为代码增多语法高亮。用法是在新窗口里输入js文件的U冠道L或然在翻看HMTL源代码时点击js文件的链接。借使是在Chrome的决定台里的财富选项里查看代码则援用应用Chrome自带的"pretty print"作用,也正是点击"{ }"Logo。

    Pretty Beautiful Javascript

    该扩展能够使Javascript文件更便于阅读。其构成了Beautifier和Prettify的效力,可以为代码增多语法高亮。用法是在新窗口里输入js文件的U福特ExplorerL恐怕在翻看HMTL源代码时点击js文件的链接。如若是在Chrome的决定台里的能源选项里查看代码则引用使用Chrome自带的"pretty print"功能,也等于点击"{ }"图标。

    ColorZilla

    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浏览器看起来何等。

    Measure It!

    参照他事他说加以考察文献

    13个针对Web开采者的优良Chrome插件

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

    MeasureIt! 给你衡量三个网址中的任何因素的尺寸。Page Ruler也是一个没有什么可争辨的的精选。

    JavaScript Errors Notifier

    设置该扩充后,会在Chrome地址栏中以Logo情势提示JavaScript错误,因为Chrome默许独有张开console才会展现错误。

    Window Resizer

    此扩展可以调节浏览器窗口的尺寸,以适应种种显示屏分辨率。那对于Web设计员和开垦者特别有用,能够支持他们在差别的显示屏分辨率下测量试验网址布局。

    Firebug Lite

    Firebug的精简版允许你检查的HTML,CSS和JavaScript代码,生活在别的页面。 你也足以编写制定代码,立即测量试验新的变通。 那是一个开拓者最欢欣的Firefox扩大Firebug的精简版。

    JQuery 扩展

    jQuery扩张令你在当前网页中运转JavaScript和jQuery命令。

    Pretty Beautiful Javascript

    该扩大能够使Javascript文件更便于阅读。其构成了Beautifier和Prettify的法力,可感觉代码增添语法高亮。用法是在新窗口里输入js文件的UGL450L也许在查看HMTL源代码时点击js文件的链接。假诺是在Chrome的主宰台里的能源选项里查看代码则援用使用Chrome自带的"pretty print"作用,也正是点击"{ }"Logo。

    WhatFont

    用于查看当前页面使用了哪些字体,Firebug和Webkit Inspector也足以查阅字体,但是远没有WebFont方便,WebFont能够因此把鼠标悬停在要素上来查看字体。同期还补协助调查看互连网字体,如Typekit和GoogleFont API。

    IE Tab

    在Chrome中开荒IE浏览器标签页,你能够展开一个标签来运维Internet Explorer,让您看看的网页在IE浏览器看起来何等。

    多谢阅读

    爱美观笔者作品的点个订阅也许喜欢!我天天都会跟大家大饱眼福文章,也会给我们提供web前端学习材料。

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:推荐几个Web前端开发实用的Chrome插

    关键词:

上一篇:我们真的缺前端工程师吗,前端学习路径

下一篇:没有了