腾讯亿级用户规模自研业务的上云实践解读,立即报名 了解详情
写点什么

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

  • 2021-03-31
  • 本文字数:2172 字

    阅读完需:约 7 分钟

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

作为前端开发者,这些工具必定让你事半功倍。


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


下面是我在日常前端开发中经常用到的 12 个工具,分享给大家,希望能对大家有所帮助。


译者注:这些工具都是 Chrome 扩展(也适用于 Microsoft Edge、Opera 等 Chromium 内核的浏览器),标题后面的数字是下载量。

1. Wappalyzer — 1,000,000+



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


它还创建了使用某些技术的网站列表,这些技术可以帮助你了解如何构建客户的网站。准备大型项目时,我无数次地使用这个工具。

2. Window Resizer — 600,000+



响应式设计是现代网站最重要的特性之一。你需要测试你的网站是否可以在各种各样类型的设备上查看。我使用 Window Resizer 来调整我的网页浏览器窗口的大小,以模拟不同的屏幕分辨率。


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

3. Marmoset — 10,000+



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


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

4. Web Developer Checklist— 40,000+



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


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

5. Code Cola: Source Code Viewer — 30,000+



如果你使用 Chrome 并且想要在页面上编辑 CSS,那么可以使用审查元素特性(译者注:Google Chrome 浏览器打开网页后,点击右键出现的菜单:Inspect/ 审查),但是它可能太过于灵活。Code Cola 是一个 Chrome 扩展,使用起来容易得多。


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

6. CSSViewer — 100,000+



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


我发现这比 Chrome 的 Inspect 元素更快更容易使用,因为它有悬停特性。

7. JSONView —1,000,000+



JSON 经常用于那些需要处理数据传输的网站,任何前端开发者都需要掌握并熟悉它。使用 JSON 时,通常需要查看和验证页面上的 JSON 文档。


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

8. Lighthouse — 600,000+



译者注:Lighthouse 已经集成到了 Google Chrome(或 Microsoft Edge),无需单独下载。


如今,自动化越来越成为前端开发的必要条件。Lighthouse 是一个开源的自动化工具,用于提高网页质量。你可以使用它来检测页面性能、可访问性、搜索引擎优化 SEO 等等。


现在,我不会在不使用 Lighthouse 的情况下进行前端项目的开发。它以各种方式帮助我改进网页。

9. Clear Cache — 800,000+


每当需要清除网页浏览器上的缓存时,通常必须手动转到“设置”页。这是前端开发者经常做的一项任务,用于测试他们正在处理的网页。


用一个 Chrome 扩展来做这件事,更有效率。我一直在使用 Clear Cache 扩展,只需单击一下就可以完成,避免浪费宝贵的时间。

10. Cookie Manager — 20,000+



拥有一个好的 cookie 管理器是前端开发的另一个关键的工具,尤其是当你的网站处理数据时。Cookie Manager 使这个过程更加简单和高效。


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

11. LiveReload: Preview Tool — 100,000+



你可能想确切地知道你的网页在背后做了什么,比如它在使用时会改变什么文件。LiveReload 是一个很好的预览工具。


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

12. Postman — 3,000,000+



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


这是简化 API 构建过程的一个很好的工具,它还简化了团队协作。我和我的团队都不知道如何在不使用 Postman 的情况下开发 API。


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

结论


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


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


原文地址:


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

2021-03-31 15:253802

评论 2 条评论

发布
用户头像
推荐您使用apipost这个工具,我也用好久了,功能强大还能自动生成接口文档 。超级好用!!
2021-08-27 16:54
回复
用户头像
推荐个自动部署网站,https://needhub.cn部署方便快捷安全好用,能把软件及环境一起安装到任何一个节点,同时还有上传自己的docker镜像,还可以获得收益。
2021-05-20 13:29
回复
没有更多了
发现更多内容

监控之美——监控系统选型分析及误区探讨

华章IT

运维 云原生 监控 Prometheus

shell脚本的使用该熟练起来了,你说呢?(篇二)

良知犹存

Shell

【经验分享】打破CMDB认知误区,掌握建设关键!

嘉为蓝鲸

运维 运维自动化 数据可视化 CMDB 配置信息

阿里技术专家熬夜一个月肛出内部“微服务学习笔记”,太完美了

小Q

Java 学习 编程 面试 微服务

架构师训练营 - 第 11 周课后作业(1 期)

Pudding

《华为数据之道》读书笔记:第 8 章 打造“清洁数据”的质量综合管理能力

方志

数字化转型 数据质量管理

今年最火的 Golang 云原生开源项目,可能就是它了!

孙健波

Kubernetes k8s OAM KubeVela CloudNative

苹果开始告别英特尔

罗燕珊

macOS Big Sur 芯片 苹果 MacBook 英特尔

40 张图带你搞懂 TCP 和 UDP

编程 程序员 大前端 后端 网络

1. 揭秘Spring类型转换 - 框架设计的基石

YourBatman

Spring Framework 类型转换 Converter

京东11.11大促背后,那些系统架构经历了些什么?

京东科技开发者

数据库 云计算 云服务

架构训练营 - 第10周课后作业 - 学习总结

Pudding

前嗅教你大数据:常见几种编码介绍

前嗅大数据

大数据 编码 编码指南

架构师训练营第一期-第十周学习总结

卖猪肉的大叔

极客大学架构师训练营

架构师训练营第一期-第十周课后作业

卖猪肉的大叔

极客大学架构师训练营

5分钟学会6个阿里内部编程的方法

Java架构师迁哥

阿里内部“高并发通关秘籍”曝光,看完带给你独一无二的认知!

比伯

Java 编程 架构 面试 计算机

架构师训练营 - 第 10 周课后作业(1 期)

Pudding

根治可扩展、高可用、高性能“神器”:SpringCloud+Nginx高并发编程手册

Java架构追梦

Java nginx 架构 面试 微服务

微博和B站屏蔽马保国相关信息:自媒体蹭热度要适可而止

石头IT视角

一个神奇的bug:OOM?优雅终止线程?系统内存占用较高?

华为云开发者联盟

sql jdk OOM

现在Php、Java、Python横行霸道的市场,C++程序员们都在干什么呢?

ShenDu_Linux

c++ 程序员 编程语言 C语言 软件工程师

anyRTC 11月SDK更新

anyRTC开发者

flutter uni-app WebRTC RTC sdk

优秀商业可视化大屏(BI)设计演示

Marilyn

UI 商业智能

阿里云在应用扩缩容下遇到的挑战与选型思考

阿里巴巴云原生

阿里云 Kubernetes 容器 云原生

完了!这57道面试题(美团、BAT、携程),我咋一个都不会?

比伯

Java 程序员 架构 面试 计算机

软件架构指南

信码由缰

软件架构

盘点c++几种常见的设计模式及具体实现

linux大本营

c++ Linux 后台开发

消防物联网,为逆行英雄守住第一道生命线

华为云开发者联盟

物联网 控制 消防

小白也能看懂!教你如何快速搭建实用的爬虫管理平台

华为云开发者联盟

Python Docker jenkins

京东成立探索研究院,打造产业数智化首个源头性科技高地; AI 论文:让机器像人类一样感知三维真实世界

京东科技开发者

人工智能 云计算

前端开发者必备的12个工具_前端_Josef Cruz_InfoQ精选文章