关于前端:前端开发者必备的-12-个工具

前端 web 开发是一个令人兴奋的畛域，越来越多的需要，造成了一个高薪的职业。同时，Web 畛域还有很多牢靠的工作，使得 Web 开发者可能更加高效的工作。

上面是我在日常前端培训开发中常常用到的 12 个工具，分享给大家，心愿能对大家有所帮忙。

译者注：这些工具都是 Chrome 扩大（也实用于 Microsoft Edge、Opera 等 Chromium 内核的浏览器），题目前面的数字是下载量。

这个工具能够让你理解到某个网站是用什么搭建的，即它的内容管理系统、电子商务平台或营销自动化工具。钻研如何创立一个网站，这是一个很棒的工具。

它还创立了应用某些技术的网站列表，这些技术能够帮忙你理解如何构建客户的网站。筹备大型项目时，我无数次地应用这个工具。

响应式设计是古代网站最重要的个性之一。你须要测试你的网站是否能够在各种各样类型的设施上查看。我应用 Window Resizer 来调整我的网页浏览器窗口的大小，以模仿不同的屏幕分辨率。

而后你能够看到你的布局在特定分辨率下的外观。你能够自定义分辨率、设置窗口宽度和高度、窗口地位等。

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

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

作为一个前端开发者，很容易遗记须要做的每一件事。当你在截止工夫前急着实现我的项目的时候，你可能跳过了要害的步骤。这就是 Toptal 的 Web Developer Checklist，它能够节俭你的工夫。

我应用 Web Developer Checklist 来确保我思考到每个我的项目中的所有基本点。它提供了前端 web 开发中最重要步骤的清单。它还剖析网页中是否存在违反最佳实际的状况，以便你能够修复这些问题。

如果你应用 Chrome 并且想要在页面上编辑 CSS，那么能够应用审查元素个性（译者注：Google Chrome 浏览器关上网页后，点击右键呈现的菜单：Inspect/ 审查），然而它可能太过于灵便。是一个 Chrome 扩大，应用起来容易得多。

这是 Chrome 上最好的 CSS 编辑器，对初学者有特地敌对的界面。我曾经用了很屡次，尝试在我的网页上编辑 CSS。

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

我发现这比 Chrome 的 Inspect 元素更快更容易应用，因为它有悬停个性。

JSON 常常用于那些须要解决数据传输的网站，任何前端开发者都须要把握并相熟它。应用 JSON 时，通常须要查看和验证页面上的 JSON 文档。

JSONView 是一个简略的工具。多年来，我学到了简略至上，没有比 JSONView 更简略的了。

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

现在，自动化越来越成为前端开发的必要条件。Lighthouse 是一个开源的自动化工具，用于进步网页品质。你能够应用它来检测页面性能、可拜访性、搜索引擎优化 SEO 等等。

当初，我不会在不应用 Lighthouse 的状况下进行前端我的项目的开发。它以各种形式帮忙我改良网页。

用一个 Chrome 扩大来做这件事，更有效率。我始终在应用Clear Cache 扩大，只需单击一下就能够实现，避免浪费贵重的工夫。

领有一个好的 cookie 管理器是前端开发的另一个要害的工具，尤其是当你的网站解决数据时。使 Cookie Manager 这个过程更加简略和高效。

有很多 cookie 管理器，我发现这个 cookie 管理器适宜我的工作流程。它不仅是为前端开发者设计，也适宜有隐衷意识的 web 用户。

你可能想确切地晓得你的网页在背地做了什么，比方它在应用时会扭转什么文件。LiveReload 是一个很好的预览工具。

我用 LiveReload 查看我的网页到底在做什么。它让我更好地理解我的网页是如何工作的。如果出错了，我能做些什么。

最初，咱们来看看 API。现在，前端开发者必然要解决 API，以便将页面与各种 web 服务集成在一起。整体上看，为它编写代码并不是最简略的事件，因而须要一个可能让你更无效的工具。

这是简化 API 构建过程的一个很好的工具，它还简化了团队合作。我和我的团队都不晓得如何在不应用 Postman 的状况下开发 API。