十款免费Web前端开发工具ByJakeRocheleau网络技术发展日新月异，有些技术难以维护。每年都有新的工具出现，这也意味着很多旧的工具挡在了新技术的路上。前端开发占据了web的很大一部分，成为了一条职业道路。如果您正在将前端开发视为您的下一项新技术或一项可行的业务，那么您需要合适的工具来完成这项工作。我将分享我的10大现代前端开发必备工具。它们都是完全免费的，而且大多数工具都将帮助您建立一个令人惊叹的网站。1.GridGuide特点：快速生成网格首先，我想介绍一下Grid.Guide，一个免费的网络应用程序，可以让你在线生成网格。这个漂亮的应用程序可让您使用自定义间距和列数构建自己的网格方案。首先输入你网站的最大宽度和总栏数，然后GridGuide会生成一些选项供你选择。您甚至可以将每个光栅方案下载为PNG图像，以便导入到Photoshop或Illustrator中。这使您可以更轻松地创建栅格，而无需进行手动计算或依赖栅格库。2.基础特性：类似于Bootstrap的框架不得不承认，大多数前端开发者更喜欢使用Bootstrap框架。但是经过最近ButZurb'sFoundation的大修，我觉得还是值得大家关注的。Foundation框架与Bootstrap一样，为网格、排版、按钮和其他动态元素预定义了CSS类。但它的设计更简单，因此比通用框架更容易自定义布局。新的Foundation还有一个名为FoundationforEmail的姊妹框架。这是一个专门为邮件界面开发而设计的框架。这两个Foundation框架都很棒，它们由Zurb的团队维护和更新。3.CodePen特点：实现新的创意代码大多数开发者都知道使用云IDE进行前端开发是非常容易的。有了它，您可以在任何计算机上编写代码，将您的项目保存到云端并共享它们。但即使有这么多选择，我不得不说CodePen是最好的。它启动迅速，非常可靠，易于启动并在您更改代码时自动更新。更不用说它还支持几乎所有你能想到的库。您可以通过预安装HTML模板语言（例如Haml或Slim）来使用LESS或SASS编译您的代码。而CodePen允许你添加外部资源，所以你可以使用cdnjs之类的网站来加载其他相关库。无疑是编写代码和实现新想法的最佳开发工具。虽然有一些类似的工具，但在我看来，没有一个能与CodePen相提并论。4.Unheap特性：最好的jQuery插件库很难在精选列表中找到最好的JS插件。大多数时候你只能在Github上浏览流行的插件或者在Twitter上查看一些流行的项目。但是，通过像Unheap这样的网站，您可以轻松快速地找到最好的jQuery插件。他们有各种类型的导航、表单、网络媒体和其他类别的插件。它基本上是网络上所有最好的jQuery插件的存储库，并且经常更新，因此您总能找到各种新插件。5.LivePage特点：自动刷新浏览器一些浏览器插件是您最好的开发工具。LivePage是一个免费的Google扩展程序，可以在您更改本地文件后自动刷新您的页面。这意味着您可以在本地编辑HTML/CSS/JS文件，每次保存时浏览器都会自动刷新。通常需要一秒钟的时间来刷新，但多次这样做后，您就会意识到这有多么烦人。LivePage在Firefox上也有相同的插件，称为LiveReload。6.FullpageScreenCapture功能：捕获全屏我一直使用这个扩展，它是我设计布局时最喜欢的工具之一。FullpageScreenCapture允许您捕获整个网页并将其保存为PNG图像。您只需单击Chrome扩展面板中的一个按钮，它就会自动创建整个网页的完整快照并将其拼接成一张图像。你可以用它来研究整体设计，这对你设计网站很有帮助。7.WhatFont特点：在网络上找到最好的排版对网页设计来说是一个巨大的挑战，而且不是一件容易的事。找到合适的字体可能会很累，但是使用WhatFont之类的扩展程序可以减轻搜索的痛苦。你只需将WhatFont添加到你的谷歌浏览器，当你在网页上看到一种字体时，点击它并悬停它，它会为你提供包括字体样式、大小等在内的所有选项，即使它可用时也提供下载URL（例如TypeKit或Webfonts）。8.Node/npm特性：命令行Node明显改变了Web开发的面貌。它将JavaScript传递到后台并返回给我们npm，npm是增长最快的包管理器之一。这几乎是不可避免的，并且有充分的理由。目前，所有的前端开发者都应该学习命令行，因为它现在是前端工作流程中必不可少的工具。而且npm也是进程的一部分，它也完全由命令行管理。您可以使用新包，或升级旧包。您还可以查看使用npm脚本还可以做什么。如果您以前从未尝试过npm，我强烈建议您亲自动手，看看它有多神奇。9.MobileSpeedTester特点：手机监控谷歌知道如何提供高质量的用户体验，他们总是试图帮助网站管理员建立更好的网站。Google最好的工具之一叫做MobileSpeedTester，它可以测试任何网站在电脑和手机上的响应能力。它衡量访问速度和用户体验，以确定网站是否适合移动设备。它不会生成详细的报告，也不足以替代可用性测试。但是这样一个免费的工具可以给你很好的反馈，让你选择正确的道路。10.ResponsiveTest功能：测试站点响应能力***但同样重要的是一个名为ResponsiveTest的Web应用程序。这是一个发布在GitHub上的开源项目，允许您测试任何网站是否在您的浏览器中正确响应。您只需输入一个URL并将窗口拖动到您想要测试的任何宽度。还有一些小按钮可以切换到iPhone、iPad和通用计算机的预定义尺寸方案。还有另一个由MattKersley开发的类似工具，但它不允许调整大小。相反，您只能使用几种预定义的窗口大小进行测试。两者都是出色的工具，使用它们比来回拖动窗口简单得多。至此我的***0列表就结束了！我希望这个列表证明是有用的，我当然希望至少这个列表中的一个工具能帮助你。由于前端开发发展如此之快，您可以期待未来会出现越来越多的强大工具。
