1。GridGuide是一款小巧的网格创建工具。用户可以通过自定义间距和列数来创建自己的网格方案。GridGuide也会提供一些宽度和列数供参考选择。您还可以将光栅方案下载为PNG图像，以便导入到Photoshop或Illustrator中。2.Foundation是一个类似于Bootstrap的框架。不得不承认的是，Bootstrap框架似乎更受前端开发者的欢迎。但是Foundation的大修有一些有趣的地方，它为网格、排版、按钮和其他动态元素提供了预定义的CSS类。设计更简单，新的Foundation还有一个姊妹框架FoundationforEmail，一个邮件开发的框架。3.CodePen是一个非常可靠的开发工具。大多数开发人员更喜欢使用云IDE进行前端开发。您可以在任何计算机上编写代码，将您的项目保存到云端并共享。当您的代码更改时，它会自动更新。最棒的事情之一是CodePen还支持几乎所有你能想到的库。您可以通过预安装HTML模板语言（例如Haml或Slim）来使用LESS或SASS编译您的代码。4.Unheap最新的jQuery插件库，包括导航、表单、网页媒体等类别的各类插件。而且它还在不断更新，基本上你可以在上面找到你想要的插件。它基本上是网络上所有最好的jQuery插件的存储库，并且经常更新，因此您总能找到各种新插件。5.LivePageLivePage是一个免费的谷歌扩展，它会自动刷新你对本地文件所做的修改，这意味着你可以在本地编辑你的HTML/CSS/JS文件。LivePage在Firefox上也有相同的插件，称为LiveReload。6.FullpageScreenCaptureFullpageScreenCapture可以捕获全屏，截取整个网页并保存为PNG图像。单击Chrome扩展面板中的按钮，它会自动创建整个网页的完整快照，并将其拼接成一张图片。研究网站的整体设计是很有帮助的。7.WhatFontWhatFont的扩展插件可以帮助您在互联网上找到最好的字体。添加插件后，当你在网页上浏览某个文本，点击它并悬停在它上面时，它会给你所有的解决方案，包括字体样式、大小等，甚至还有下载地址。8.Node/npm作为前端开发人员，你应该学习命令行，因为它现在是前端工作流程中必不可少的工具。npm也完全从命令行管理。它将JavaScript传递到后台并返回给我们npm，npm是增长最快的包管理器之一。如果你以前从未尝试过npm，建议尝试一下，你会惊叹不已！9.MobileSpeedTester是一个可以测试任何网站在电脑和手机上的响应速度的工具，帮助站长建立更好的用户体验，这样一个免费的工具可以给你很好的反馈，让你选择的方法更多正确的。10.ResponsiveTestResponsiveTest测试站点的响应速度，只需要输入一个URL，将窗口拖动到你想测试的任意宽度即可。还有一些小按钮可以切换到iPhone、iPad和通用计算机的预定义尺寸方案。节省;来回拖动窗口的麻烦。今天的TOP10榜单就到这里。希望这些工具能够帮助大家提高效率，事半功倍。可能还有很多我没注意到的新工具，欢迎分享！
