十个免费的web前端开发工具详细整理(2)

这意味着你可以在本地编辑你的HTML/CSS/JS文件,而浏览器会在你每次保件时自动刷新。通常你需要花费一秒钟去刷新,但这样子操作许多次后你将会发现这有多么烦人。

LivePage在火狐上也有相同的插件叫做LiveReload

6. Fullpage Screen Capture

特性: 捕获全屏

十个免费的web前端开发工具详细整理

我一直使用这个扩展插件而且它是我设计布局时最喜欢用的工具之一。 可以让你截取整个网页并存为PNG图片。

你只需简单的点击Chrome扩展面板中的按钮,它就会自动创建整个网页的完整快照,并将其拼接成一幅图像。你可以用它来研究整体设计,这对你设计网站很有帮助。

7. WhatFont

特性: 在网络上找到最棒的字体

十个免费的web前端开发工具详细整理

排版对网页设计而言是一个巨大的挑战,而且并不是一件很容易的事。要找到合适的字体是很累人的,但是使用例如 的扩展插件,可以减轻你在搜索时的痛苦。

你只需添加WhatFont到你的谷歌浏览器,每当你看到网页上某一种字体时,点击它并悬停,就会给你所有的包括字体样式、大小等方案,甚至在可服务时给出下载地址(例如TypeKit或Webfonts)。

8. Node/npm

特性: 命令行

十个免费的web前端开发工具详细整理

Node很显然改变了web开发的面貌。它将JavaScript传递给后台,并返回给我们npm,一种发展最迅速的包管理器。

这几乎是必然的,并且是有着充分的理由。在当前,所有的前端开发者都应该学习命令行,因为现在这是一种在前端工作流中必要的工具。而且npm也是这个过程的一部分,它也完全由命令行管理。

你可以使用新的包,或升级旧的包。通过 npm scripts你也能了解到你还可以做什么。

如果你之前从未尝试过npm,那么我强烈建议你开始涉足这一块,看看它哪里令人惊叹。

9. Mobile Speed Tester

特性: 手机监测

十个免费的web前端开发工具详细整理

谷歌懂得提供优质的用户体验,他们总是尝试帮助站长们建立更好的网站。谷歌的一个最佳的工具叫Mobile Speed Tester,能测试任何网站在电脑和手机上的响应速度。

它同时衡量访问速度和用户体验,以此来判定该网站是否对手机友好。

它不会生成详细的报告,也不足以成为usability testing的替代品。但这样的一个免费工具能给你好的反馈,让你选择更加正确的方法。

10. Responsive Test

特性: 测试站点响应速度

十个免费的web前端开发工具详细整理

最后但肯定同样重要的是一个叫 Responsive Test的网页应用。这是一个发布在GitHub上的开源项目,可以让你测试任何网站的在你的浏览器上的响应是否正常。

您只需输入一个URL并将窗口拖到您要测试的任何宽度。而且还有小按钮可以切换为iPhone、iPad和通用电脑的预定义大小方案。

这里也有另外一种 由Matt Kersley开发的相似工具,但是它不能调节大小。相反的,你只能使用几种预定义大小的窗口用于测试。

这两个都是优秀的工具,使用它们远比来回拖动窗口要简单得多。

到这里为止我的TOP10列表已经结束了!我希望这个列表能被证实有用,同时我当然也希望至少有一种在这列表上的工具能帮到大家。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyzsyf.html