澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站:推荐介绍多少个Web前端开

2019-09-22 作者:澳门新萄京赌场网址   |   浏览(127)

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的,非常方便啊。

越来越多的前端开发人员喜欢在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也是一个非常强大的Cookie工具。

网页截图

截取网页为图片,支持窗口截图,区域截图和整个网页截图三种方式。支持水平和垂直翻页截取超大网页,新版引进自动截图保存功能。截图后,可以利用图片编辑工具编辑图片,然后将编辑后的图片保存为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格式的图片文件,并且提供了高亮工具,涂改工具和文字添加工具。

Web Developer

YSlow

YSlow可以分析网页,并为改善网页性能提出修改建议,这些功能基于高性能网页的规则集。YSlow可以根据预定义的三个规则集或用户自定义规则集来对网页进行分级。,PageSpeed Insights是谷歌开发的类似功能的插件。

其他

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

YSlow

YSlow可以分析网页,并为改善网页性能提出修改建议,这些功能基于高性能网页的规则集。YSlow可以根据预定义的三个规则集或用户自定义规则集来对网页进行分级。,PageSpeed Insights是谷歌开发的类似功能的插件。

安装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地址栏中以图标形式提示JavaScript错误,因为Chrome默认只有打开console才会显示错误。

JavaScript Errors Notifier

安装该扩展后,会在Chrome地址栏中以图标形式提示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是谷歌开发的类似功能的插件。

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"功能,也就是点击"{ }"图标。

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!

参考文献

10个针对Web开发者的优秀Chrome插件

如需转载,请注明来自: BorisHuai前端修炼 > Web前端开发人员实用Chrome插件收集

MeasureIt! 给你测量一个网站中的任何元素的尺寸。Page Ruler也是一个不错的选择。

JavaScript Errors Notifier

安装该扩展后,会在Chrome地址栏中以图标形式提示JavaScript错误,因为Chrome默认只有打开console才会显示错误。

Window Resizer

此扩展可以调整浏览器窗口的大小,以适应各种屏幕分辨率。这对于Web设计师和开发者非常有用,可以帮助他们在不同的屏幕分辨率下测试网站布局。

Firebug Lite

Firebug的精简版允许您检查的HTML,CSS和JavaScript代码,生活在任何页面。 你也可以编辑代码,立即测试新的变化。 这是一个开发者最喜欢的Firefox扩展Firebug的精简版。

JQuery 扩展

澳门新萄京官方网站:推荐介绍多少个Web前端开垦实用的Chrome插件,Chrome开荒者工具不完全指南。jQuery扩展让你在当前网页中运行JavaScript和jQuery命令。

Pretty Beautiful Javascript

该扩展可以使Javascript文件更容易阅读。其整合了Beautifier和Prettify的功能,可以为代码添加语法高亮。用法是在新窗口里输入js文件的URL或者在查看HMTL源代码时点击js文件的链接。如果是在Chrome的控制台里的资源选项里查看代码则推荐使用Chrome自带的"pretty print"功能,也就是点击"{ }"图标。

WhatFont

用于查看当前页面使用了哪些字体,Firebug和Webkit Inspector也可以查看字体,但是远没有WebFont方便,WebFont可以通过把鼠标悬停在元素上来查看字体。同时还支持查看网络字体,如Typekit和Google Font API。

IE Tab

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

感谢阅读

喜欢看小编文章的点个订阅或者喜欢!小编每天都会跟大家分享文章,也会给大家提供web前端学习资料。

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站:推荐介绍多少个Web前端开

关键词: