前端开发者必备的12个工具

译者｜Josef Cruz翻译者丨吴留坡策画丨田星毛做为前端开发人员，那些辅助工具倘若让你四两拨千斤。

前端 web 开发是两个令人激动的应用领域，愈来愈多的市场需求，逐步形成了两个低薪的业余。与此同时，Web 应用领域除了许多可信的组织工作，使 Web 开发人员能更为高效率的组织工作。

上面是我在日常生活前端开发中时常加进的 12 个辅助工具，撷取给我们，期望能对我们略有协助。

翻译者注：那些辅助工具都是 Chrome 扩充（也适用于于 Microsoft Edge、Opera 等 Chromium Mach的应用程序），副标题前面的位数是用户数。

那个辅助工具能让你介绍到某一中文网站是用甚么构筑的，即它的文本管理系统、电商网络平台或网络营销智能化辅助工具。科学研究怎样建立两个中文网站，这是两个很酷的辅助工具。

它还建立了采用这类控制技术的中文网站条目，那些控制技术能协助你介绍怎样构筑顾客的中文网站。预备项目投资时，我许多次地采用那个辅助工具。

https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg

积极响应式结构设计是当代中文网站最重要的优点众所周知。你须要试验你的中文网站与否能在各式各样类别的电子设备上查阅。我采用 Window Resizer 来修正我的页面应用程序询问处的大小不一，以演示相同的萤幕分辨率。

然后你能看到你的布局在特定分辨率下的外观。你能自定义分辨率、设置询问处宽度和高度、询问处位置等。

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

程序员组织工作的一部分就是向顾客或上级展示他们的代码，但是常规的萤幕截图可能不那么吸引眼球，所以你要让它们变得生动起来。我用 Marmoset 为我的代码拍了一些很酷的快照，然后把那些快照放在我的幻灯片上，从而给人留下好印象。

不用说，我的代码幻灯片一点也不无聊。我开始修改模版和颜色主题，使我的演讲更为令人难忘。

https://chrome.google.com/webstore/detail/marmoset/npkfpddkpefnmkflhhligbkofhnafieb

做为两个前端开发人员，很容易忘记须要做的每一件事。当你在截止时间前急着完成项目的时候，你可能跳过了关键的步骤。这就是 Toptal 的 Web Developer Checklist，它能节省你的时间。

我采用 Web Developer Checklist 来确保我考虑到每个项目中的所有基本点。它提供了前端 web 开发中最重要步骤的清单。它还分析页面中与否存在违反最佳实践的情况，以便你能修复那些问题。

https://chrome.google.com/webstore/detail/web-developer-checklist/iahamcpedabephpcgkeikbclmaljebjp

如果你采用 Chrome 并且想要在页面上编辑 CSS，那么能采用审查元素优点（翻译者注：Google Chrome 应用程序打开页面后，点击右键出现的菜单：Inspect/ 审查），但是它可能太过于灵活。Code Cola 是两个 Chrome 扩充，采用起来容易得多。

这是 Chrome 上最好的 CSS 编辑器，对初学者有特别友好的界面。我已经用了许多次，尝试在我的页面上编辑 CSS。

https://chrome.google.com/webstore/detail/code-cola/lomkpheldlbkkfiifcbfifipaofnmnkn

如果你只须要查阅页面上的 CSS 属性，CSSViewer 非常棒。只需单击图标并将光标悬停在要检查的任何元素上，就能看到它的 CSS 属性。

我发现这比 Chrome 的 Inspect 元素更快更容易采用，因为它有悬停优点。

https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce

JSON 时常用于那些须要处理数据传输的中文网站，任何前端开发人员都须要掌握并熟悉它。采用 JSON 时，通常须要查阅和验证页面上的 JSON 文档。

JSONView 是两个简单的辅助工具。多年来，我学到了简单至上，没有比 JSONView 更简单的了。

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc

翻译者注：Lighthouse 已经集成到了 Google Chrome（或 Microsoft Edge），无需单独下载。

如今，智能化愈来愈成为前端开发的必要条件。Lighthouse 是两个开源的智能化辅助工具，用于提高页面质量。你能采用它来检测页面性能、可访问性、搜索引擎优化 SEO 等等。

现在，我不会在不采用 Lighthouse 的情况下进行前端项目的开发。它以各种方式协助我改进页面。

https://github.com/GoogleChrome/lighthouse

每当须要清除网页应用程序上的缓存时，通常必须手动转到“设置”页。这是前端开发人员时常做的一项任务，用于试验他们正在处理的页面。

用两个 Chrome 扩充来做这件事，更有效率。我一直在采用 Clear Cache 扩充，只需单击一下就能完成，避免浪费宝贵的时间。

https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn

拥有两个好的 cookie 管理器是前端开发的另两个关键的辅助工具，尤其是当你的中文网站处理数据时。Cookie Manager 使那个过程更为简单和高效率。

有许多 cookie 管理器，我发现那个 cookie 管理器适合我的组织工作流程。它不仅是为前端开发人员结构设计，也适合有隐私意识的 web 用户。

https://chrome.google.com/webstore/detail/cookiemanager-cookie-edit/hdhngoamekjhmnpenphenpaiindoinpo

你可能想确切地知道你的页面在背后做了甚么，比如它在采用时会改变甚么文件。LiveReload 是两个很好的预览辅助工具。

我用 LiveReload 查阅我的页面到底在做甚么。它让我更好地介绍我的页面是怎样组织工作的。如果出错了，我能做些甚么。

https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

最后，我们来看看 API。如今，前端开发人员倘若要处理 API，以便将页面与各种 web 服务集成在一起。整体上看，为它编写代码并不是最简单的事情，因此须要两个能让你更有效的辅助工具。

这是简化 API 构筑过程的两个很好的辅助工具，它还简化了团队协作。我和我的团队都不知道怎样在不采用 Postman 的情况下开发 API。

https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop

翻译者注：Postman 现在已经升级成非 Chrome 插件的独立顾客端。

上面列出的辅助工具是一些我用过的最好的辅助工具。试一下吧，看你喜不喜欢。当我第一次组装我的个人前端开发辅助工具包时，就是这么做的。

我从过去的经验中学到，拥有最好的前端开发辅助工具有助于提高效率率，这肯定会为你节省大量宝贵的时间，将使你在编码和解决问题方面做得更好。

原文地址：

https://medium.com/javascript-in-plain-english/11-front-end-developer-tools-i-cant-live-without-c3a62b5d0db2

Angular、React 和 Vue 三大框架，Web 开发该怎样选择？