【必备】15 个前端开发、写作神器 ~

6,045 阅读2分钟

最近在整理 Chrome 浏览器中的标签分类,特地把自己认为最有价值的一些前端开发和写作工具分享给大家!

之前整理过两篇:

  1. 这 12 个基于 AI 的 VSCode “杀手级” 生产力插件,了解一下?
  2. 我收藏的这 100 + 个”杀手级“网站,你用过几个?

1、getdevkit

专门为开发人员准备的 GPT(基于 GPT3.5)!

image.png

2、arc 浏览器

一个号称 Chrome 平替的新浏览器!不试试?主要有以下几个优点:

  • 对标签过载问题提出了新颖的方案
  • 交互设计细致入微,重引导而非强迫
  • 网页修改功能有黑客精神和早期浏览器遗风
  • 非常美貌(取决于你的偏好)

image.png

详细介绍可以参考这篇:Arc: 一个试图改变历史的浏览器

3、vs-browser

在 VS Code 中内建的浏览器,简单的调试基本够用了。

start-extension.gif

4、starship

轻量、迅速、可无限定制的高颜值终端!

  • 快:  很快 —— 真的真的非常快! 🚀
  • 定制化:  可定制各种各样的提示符。
  • 通用:  适用于任何 Shell、任何操作系统。
  • 智能:  一目了然地显示相关信息。
  • 功能丰富:  支持所有你喜欢的工具。
  • 易用:  安装快速 —— 几分钟就可上手。

image.png

5、bundlephobia

每当你想使用一个新的库或者包时,一定要看看这个包的 bundle size!避免把一个 拖油瓶 引入到项目里面。

image.png

6、coolors

开发通常比较缺乏设计和审美,这个网站可以帮你搞定色彩搭配,不至于做出丑陋的“万紫千红”。

image.png

7、ray.so

代码美化就靠它了!写作中,大多数的卡片式代码图片皆来自于此:

image.png

其实还有一个:carbon,也挺好看。

8、excalidraw

文章写作中的插图神器!

image.png

9、dbdiagram

ER 图神器!

image.png

10、drawio

流程图神器!功能强大且免费~

image.png

11、dribble + behance

  1. dribble

大量优质的UI资源,你不再需要UI了~

image.png

  1. behance

媲美 dribble 的又一个设计资源,你真的不再需要UI了~

image.png

12、regexgpt

正则神器,知己一步到位,帮你把工具函数都写好,再也不用学正则了!

image.png

13、omni

浏览器高效神器!只需在 Mac 上按 ⌘+Shift+K 或在 Windows 上按 Ctrl+Shift+K。使用简单的命令界面管理选项卡、书签、浏览器历史记录、执行各种操作。

image.png

14、json-generator

批量生成 json 格式的 mock 数据,测试必备!

image.png

15、mocks-server

这个神器可以让你轻松测试前端很多场景都需要的 CRUD!

image.png