目录

• 写在前面
• 设计
• 开发
  • 开发前
    • 技术选型
    • 绘图工具
  • 开发中
    • CDN
    • AI编码助手
    • 格式化
    • 在线编码
    • 命名
    • 占位
      • 图片占位
      • 视频占位
    • CSS 效果生成器
    • 网页骨架布局生成器
    • 正则表达式
    • 调试
      • 数据模拟
      • http 调试
      • 接口调试
    • 图标库
    • 加密
    • 转换器
    • 其他工具
  • 开发后
    • 文档编写
      • 在线代码展示
      • API 文档
      • 代码分享
    • 测试
      • 压测
      • 兼容性
    • 性能优化
    • 代码提交
• 上线
  • 运维
  • 抓包

写在前面

开发中我们需要使用到各种工具，这篇文章整理了我工作五年以来经常使用的开发工具。涉及到从设计、开发、测试、上线的的整流程。

点击链接可以查看原文地址，我的博客会不定期更新一些简单易懂的前端教程，关注Github可以不走丢。

设计

• Figma ：Figma是一款基于浏览器的协作式 UI 设计工具，它允许多个用户同时编辑同一个设计文件。Figma 的界面直观易用，功能强大，它支持多种设计文件格式的导入和导出，如 Sketch、Adobe XD、PNG、SVG 等。Figma 还提供了丰富的插件生态系统，用户可以根据自己的需求安装和使用各种插件。
• 蓝湖： 蓝湖是一款产品设计协作平台，它可以帮助团队更高效地进行产品设计和开发。蓝湖支持多种设计文件格式的导入和导出，如 Sketch、Photoshop、Adobe XD 等。在蓝湖上，团队成员可以实时协作编辑同一份设计文件，并且可以对文件进行版本管理，方便回溯和查看历史记录。此外，蓝湖还提供了设计稿的标注和切图功能，使得开发人员可以更方便地获取设计稿的信息，提高开发效率。
• undraw：unDraw 是一个开源的插图库，它提供了一套简约、现代且风格一致的矢量图形。这些图形可用于各种目的，如网站设计、演示文稿、海报制作等。

开发

开发前

技术选型

• caniuse : 用于查询前端属性各大浏览器是否支持。

绘图工具

• app.diagrams.net： app.diagrams.net 是一个免费的在线图表编辑工具，它允许用户创建和编辑各种类型的图表，包括流程图、组织结构图、网络图、UML 图等。该工具提供了一个直观的用户界面，使得用户可以轻松地添加、删除和修改图表元素。此外，app.diagrams.net 还支持实时协作编辑，允许多个用户同时编辑同一张图表，并提供了版本控制功能，以便用户跟踪和管理图表的修改历史。
• excalidraw ： Excalidraw 是一个在线协作白板工具，它允许用户创建、编辑和分享绘图和图表。Excalidraw 的特点是它的简洁性和易用性，用户可以轻松地创建各种类型的图形，如流程图、组织结构图、思维导图等。该工具提供了丰富的绘图工具和图标库，用户可以根据自己的需求选择合适的工具和图标来创建图形。Excalidraw 还支持实时协作编辑，允许多个用户同时编辑同一张图，这使得团队成员可以在同一个平台上协作完成任务。它提供了版本控制功能，用户可以跟踪和管理图的修改历史，方便回溯和查看。此外，Excalidraw 还支持图像和 PDF 格式的导出，用户可以将他们创建的图以图像或 PDF 文件的形式保存和分享。
• Miro.com ：Miro.com 是一个在线协作平台，它提供了一个可视化的工作空间，允许团队成员实时协作和交流。它支持多种工具和模板，用于思维导图、流程图、线框图、项目管理等，可以帮助团队更高效地协作和完成任务。
• 语雀画板：语雀画板是一个在线协作白板工具，它类似于 Miro 和 Excalidraw，允许用户创建、编辑和分享绘图和图表。语雀画板是语雀团队推出的一款产品，主要服务于团队协作和知识分享领域。

开发中

CDN

• Javascript 库 CDN ： BootCDN 是一个内容分发网络（CDN），它专注于前端开发资源的分发，如 JavaScript 库、CSS 样式表、字体文件等。它提供了一个快速、可靠的方式来获取这些资源，从而提高网站或应用程序的性能。
• jsdelivr：一个免费的开源 CDN，提供了广泛的 JavaScript 和 CSS 库。它支持 HTTPS，并且在全球范围内有多个节点，为用户提供快速的访问速度。

AI编码助手

• Tabnine：Tabnine 是一个代码补全和代码分析工具，它使用 AI 技术来帮助开发者更高效地编写代码。Tabnine 的主要功能包括代码自动补全、代码智能建议、代码分析和代码优化等。它可以在多种编辑器和 IDE 中使用，并且支持多种编程语言。通过使用 Tabnine，开发者可以更快地编写代码，减少错误，并提高代码质量。
• GitHub Copilot ：GitHub Copilot是最早出现的 AI 编程助手，也是市场占有率和知名度最高的一个。它是微软出品，底层是 OpenAI，又依托着世界最大的程序员社区，自然是实力非凡。缺点是需要付费的。
• 豆包 MarsCode ：豆包 MarsCode]是基于豆包大模型打造的智能开发工具。它的背后是字节跳动，本来是内部工具，据说字节超过70%的工程师都在用，每月贡献百万行量级的代码。完全免费，相比于 Copilot 有过之而无不及。

格式化

• prettier playground：Prettier Playground 是一个在线代码格式化工具，它基于 Prettier 库，支持多种语言的代码格式化。用户可以在编辑器中粘贴代码，然后点击格式化按钮，Prettier Playground 会自动将代码格式化为 Prettier 默认的样式。这使得代码看起来更加统一和整洁，提高了代码的可读性和可维护性。
• json.cn: JSON 代码格式化。

在线编码

• codesandbox：CodeSandbox 是一个基于浏览器的在线代码编辑器和开发环境，它主要用于 Web 应用程序的开发。CodeSandbox 提供了一个集成的开发环境，包括代码编辑器、调试器、预览窗口和版本控制系统等工具，使得开发者可以在浏览器中完成从编码到部署的整个开发流程。
• stackblitz：StackBlitz 是一个基于 Web 的代码编辑器，专门用于前端开发，允许用户创建和编辑 TypeScript、JavaScript、HTML 和 CSS 代码。它提供了一个实时预览功能，使用户可以即时看到他们的代码更改如何影响最终的 Web 页面。StackBlitz 还集成了 NPM 和 Yarn 包管理器，允许用户轻松管理项目的依赖。此外，它还支持 Git 版本控制，使得团队协作更加高效。StackBlitz 的目标是提供一个快速、简单和高效的开发环境，帮助开发者专注于编写代码，提高生产力。它是一个非常有用的工具，特别适合那些想要快速尝试新的前端库或框架的开发者，或者需要远程协作的团队。
• Cloud Studio：Cloud Studio 是腾讯云提供的一种基于云端的集成开发环境（IDE），它支持多种开发语言和框架，如 JavaScript、Python、Ruby 等。Cloud Studio 提供了一个完整的开发环境，包括代码编辑器、调试器、终端、版本控制等工具，使得开发者可以在云端轻松地进行开发和调试。Cloud Studio 还支持团队协作，可以邀请团队成员加入项目，共同开发。此外，Cloud Studio 提供了丰富的扩展和插件，开发者可以根据自己的需要进行安装和使用。总的来说，Cloud Studio 是一个功能强大的云端开发工具，它可以提高开发者的效率和协作能力。
• runkit：Runkit 是一个在线的开发环境和代码执行平台，它支持多种编程语言，包括 JavaScript、Node.js、Python、Ruby 等。在 Runkit 上，用户可以编写、调试和执行代码片段或完整的应用程序，而无需在本地机器上安装任何软件或环境。Runkit 提供了一个基于 Web 的集成开发环境（IDE），用户可以在其中编写代码，并实时预览代码的执行结果。它还支持代码共享和协作，用户可以创建公开或私有的代码片段，与团队成员或社区分享，并进行实时编程讨论。此外，Runkit 还提供了一些扩展功能，如包管理（NPM）、数据库连接（如 MongoDB）、可视化和数据分析工具等，使得它成为一个功能丰富的开发平台。

命名

• codelf： 变量命名神器，可以在GitHub、Bitbucket、GitLab上搜索，找到真实世界的使用变量名称。可以帮助解决命名困难的问题。拥有VScode插件。

占位

图片占位

• picsum.photos： 随机占位图。picsum.photos 是一个免费的图片资源网站，它提供了大量高质量的图片供用户免费下载和使用。这些图片涵盖了各种主题和风格，可以用于个人和商业项目，无需支付版税或版权费用。 picsum.photos 的使用非常简单。用户可以通过访问网站主页，浏览随机展示的图片，或者使用搜索功能来查找特定主题的图片。每张图片都有一个唯一的 URL，用户可以复制并在自己的项目中使用这些 URL。 此外，picsum.photos 还提供了一些 API，使得开发者可以通过编程方式访问和使用图片资源。API 允许用户获取随机图片、指定大小或格式的图片，以及根据特定关键字搜索图片等功能。 picsum.photos 的出现为需要图片资源的个人和企业提供了一个方便、免费且合法的获取途径，同时也为摄影师提供了一个展示作品的平台。以下是常见用法：

  • 正方形： https://picsum.photos/200
  • 长方形： https://picsum.photos/536/354
  • 根据种子获取不同的图片 https://picsum.photos/seed/ {seed}/536/354： https://picsum.photos/seed/picsum/200/300

• via.placeholder.com：可以用于生成不同颜色和大小的占位图片。比如可以生产 210 px的正方形白色图片： https://via.placeholder.com/210/fff。

• generative-placeholders.glitch.me ：可以生成更加艺术的图片占位。比如生成一个600*300的图片： https://generative-placeholders.glitch.me/image?width=600&height=300&style=cellular-automata&cells=10 。

• 美女图片： http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg 。

• 朋克图片： https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg 。

• 不跨域的图片地址： https://raw.githubusercontent.com/songxingguo/songxingguo.github.io/0744a15dd3a7005bb7e572c62be74becf822a321/themes/next/source/images/test.jpeg

视频占位

• 良品铺子MP4格式： https://gw.alicdn.com/bao/uploaded/LB1l2iXISzqK1RjSZFjXXblCFXa.mp4?spm=taofed.bloginfo.blog.6.309f5ac8Unzav9&file=LB1l2iXISzqK1RjSZFjXXblCFXa.mp4
• 西瓜播放器Mp4地址： https://lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4
• mp4、3gp、mkv、flv格式测试视频

CSS 效果生成器

• loading.io ：Loading.io 是一个提供加载动画制作和下载服务的网站。它提供了一个在线工具，允许用户创建自定义的加载动画，用户可以选择不同的样式、颜色和动画效果，也可以上传自己的图标或图像作为加载动画的一部分。 创建好的加载动画可以下载为 GIF、APNG、SVG 或 CSS 代码的格式，方便用户在不同的场合中使用。Loading.io 还提供了 API，允许开发者将加载动画集成到他们的应用程序或网站中。 此外，Loading.io 还提供了一些现成的加载动画模板，用户可以直接下载使用。网站上还有一个展示区，用户可以查看其他用户创建的加载动画，并获取灵感。

• css-arrow： CSS 三角形生成器。

• stripesgenerator.com：CSS 条纹生成器。

• Cavepaint CSS： 一个可以在线调节主要参数（CSS 变量）的 CSS 框架。

• bennettfeely: 一个在线工具，旨在帮助用户生成各种独特的 CSS 路径裁剪（clip-path）代码。CSS 路径裁剪是一种强大的技术，允许您通过定义一个路径来裁剪元素的可见区域，从而创建出各种各样有趣的形状和效果。可以将裁剪路径导出为SVG，这样可以利用SVG的SMIL动画技术设置路径动画，从而使路径裁剪在页面上呈现出更加生动和引人注目的外观。

  • [[@推荐两个CSS生成器，专治各种不规则形状，建议收藏]]

• css-generators: 一个集合多种 CSS 生成器的网站，旨在帮助开发者和设计人员快速生成他们需要的 CSS 代码。此网站提供了各种 CSS 生成器，包括渐变生成器、阴影生成器、转换生成器等，让开发者能够减少手写 CSS 代码的时间，并专注于更加重要的工作。

网页骨架布局生成器

• skeletonreact.com ：有些网页加载时，会显示一个骨架布局（上图），获取正式内容后再替换掉。这个在线工具就用来生成骨架布局，支持 React、React Native、Vue 和普通 HTML。
• BlurHash：提取背景图 hash。提供加载占位图。

正则表达式

• regexper.com： Regexper 是一个在线正则表达式可视化工具。它提供了一个直观的界面，用于构建、测试和调试正则表达式。用户可以在 Regexper 的可视化编辑器中编写正则表达式，然后通过实时预览来查看表达式如何匹配文本。此外，Regexper 还提供了详细的解释和错误报告，帮助用户理解和解决正则表达式中的问题。
• jex.im： 和regexper.com类似，也是正则表达式可视化工具。
• any86.github.io/any-rule： 常用正则表达式大全。可以在VSCode中使用。
• ​regexlib.com： 常用正则表达式库。

调试

数据模拟

• mockjs.com：Mockjs.com 是一个提供模拟数据生成服务的网站。它可以帮助开发者快速生成模拟数据，以便在开发过程中进行接口测试、前端调试等工作。
• random-data-api： 生成随机数据，类似于Mockjs.com。
• miragejs：MirageJS 是一个用于在前端开发过程中模拟后端 API 的 JavaScript 库。它允许开发者在本地创建一个虚拟的 API 服务器，从而可以在没有真实 API 服务器的情况下进行开发和测试。
• next.json-generator.com: 生成虚拟 JSON 数据。
• json-server ： json-server 是一个基于 Node.js 的简单服务器，它可以将 JSON 文件作为数据库，并提供 HTTP API 接口来操作这些数据。json-server 不需要任何配置，只需要一个 JSON 文件，就可以快速搭建一个 RESTful API 服务器。它是一个简单、高效、免费的工具，适用于开发、测试和原型设计阶段。

http 调试

• [[ngrok]]：ngrok 是一个反向代理工具，将你本地的 HTTP 服务暴露在外网。 ngrok 使用一个公共 URL 来重定向到你的本地服务器，从而使其可以从任何地方访问。 ngrok 通常用于以下场景： 本地开发和测试：在开发过程中，使用 ngrok 可以让其他团队成员或测试人员访问你本地开发的网站或 API，方便协作和调试。还可以用于本地调试 Webhook 返回的数据。
• Diode ：Diode可以将本机（localhost）的网站公开到互联网上，提供一个二级域名，使得外部用户可以访问。
• dnspeep-tool： 一个命令行工具，查看本机发出的所有 DNS 请求和获得的回应。更多内容可以查看博客文章。

接口调试

• hoppscotch： Hoppscotch.io是一个用于测试和调试 API 的在线平台。它提供了一个易于使用的界面，允许用户创建、发送和查看 API 请求和响应。相当于PostMan的在线版本。类似的还有一个国内的 apifox
• curl -> fetch​： 将curl 转换为fetch请求的在线工具。

图标库

• FontAwesome： Font Awesome 是一个非常流行的图标字体库，它包含了超过 1500 个可缩放的矢量图标，可以通过 CSS 和 HTML 使用。这些图标设计精美，风格一致，可以用于各种 Web 和移动应用程序的用户界面设计。
• iconfont：iconfont.cn 是一个阿里提供矢量图标资源的平台，用户可以在网站上下载 iconfont 格式的图标文件，并且可以通过代码引用这些图标。

加密

• cryptography ：提供在线 MD5 Hash 等常见的加密方式。

转换器

• transform.tools： 提供了多种文件格式的在线转换，比如html2jsx，svg2jsx等。

其他工具

• devhints：工具备忘录
• float-toy：可视化浮点数
• mov.to：视频在线播放器。

开发后

文档编写

在线代码展示

• 码上掘金 ： 码上掘金是一个在线代码编辑器和社区平台，它支持多种编程语言，允许开发者在浏览器中编写、编辑和共享代码。它提供了一个集成的开发环境，包括代码编辑器、调试工具和版本控制系统，使得开发者可以更加高效地编写代码。同时，它也是一个开发者社区，开发者可以在码上掘金上发布自己的代码片段，与其他开发者交流和分享编程经验。
• codepen：Codepen 是一个在线代码编辑器和社区平台，它允许用户在浏览器中直接编写、编辑和共享代码。它特别适合前端开发，支持 HTML、CSS 和 JavaScript 等语言。用户可以在 Codepen 上创建自己的代码片段，并与其他开发者分享，从而获得反馈和灵感。
• jsfiddle：jsfiddle 是一个在线的代码编辑器和调试工具，主要用于 JavaScript、CSS 和 HTML 的开发和测试。它提供了一个集成的环境，允许用户编写、编辑和测试代码片段，同时还提供了实时预览功能，让用户可以即时看到代码的效果。
• jsbin：JSBin 是一个在线的代码编辑器和调试工具，类似于 JSFiddle。它允许开发者在浏览器中编写、编辑和测试 JavaScript、CSS 和 HTML 代码。JSBin 提供了一个实时预览功能，让开发者可以即时看到代码的效果。它还支持代码分享，用户可以将自己编写的代码生成一个 URL 链接分享给其他人。

API 文档

• Swagger： 编写在线 API 文档。Swagger 是一个用于描述、设计、构建和文档化 RESTful API 的开源工具集。它提供了一套规范和框架，帮助开发者设计和构建易于理解、易于使用的 REST API。Swagger 工具集包括 Swagger UI，这是一个可视化的界面，允许开发者和用户以互动的方式查看和测试 API。Swagger Specification（Swagger 规范）是描述 API 的格式，包括 API 的路径、HTTP 方法、请求和响应参数等信息。通过编写 Swagger 规范文档，开发者可以清晰地表达 API 的设计意图和使用方式，这有助于团队成员之间的协作，也有助于 API 的消费者理解如何使用 API。Swagger 还提供了各种工具和库，支持多种编程语言，使得开发者能够轻松地在他们的项目中集成 Swagger。通过使用 Swagger，开发者可以提高 API 的质量、一致性和可维护性，同时也可以加快 API 的开发和测试周期。
• [[vue-styleguidist]]：Vue Styleguidist 是一个用于创建、管理和展示 Vue.js 组件库文档的工具。它可以帮助开发者轻松地生成文档，使得团队成员或者外部开发者能够更好地了解和使用你的组件库。

代码分享

• 代码截图
  • ray.so：漂亮的代码截图和格式化。
  • carbon： Carbon 是一个用于创建、展示和分享代码片段、文档和项目的平台，它提供了一种简单直观的方式来展示代码和文档，并且支持多种编程语言和格式。通过 Carbon，用户可以轻松地创建美观、自定义的代码片段和文档，并与其他人分享。Carbon 提供了一个实时预览功能，使用户可以即时看到他们的代码更改如何影响最终的显示效果。
• codecopy： 在线发布和分享代码。

测试

压测

• www.2n.pl：一个服务器和数据库的性能压测工具，具有图形界面。
• locust.io： 一个开源的负载压测工具。

兼容性

• sizzy.co：不同屏幕大小兼容性测试。

性能优化

• PageSpeed Insights：谷歌官方的网页性能的在线评分工具。
• Lighthouse：可获取实验室性能数据以及网页整体优化建议（包括但不限于性能建议）。

代码提交

• [[gitmoji]]: Git 提交信息表情。
• icdiff：一个命令行的彩色 diff 工具。
• [[Husky]] ：在 Git 钩子中使用脚本，从而在提交（commit）代码前运行诸如代码风格检查、单元测试等任务。
• [[commitlint]]：git message 校验。
• [[cz-git]]：使用 OpenAI 生成 git commit 提交信息。
• [[ChatGPT-CodeReview]]： Github Code Review 机器人
  • 机器人地址：github.com/apps/cr-gpt

上线

运维

• Spug：Spug 是一个开源的自动化运维平台，它提供了对应用程序和服务器的部署、监控和管理功能。Spug 可以帮助开发团队和运维团队更高效地协作，提高应用程序的交付速度和质量，减少运维成本和风险。
• digitalocean-nginx: [[Nginx]] 的图形配置界面。

抓包

• netgraph： 一个 Go 语言写的 HTTP 抓包分析器，带有 Web 界面。

• wireshark： Wireshark 是一款网络协议抓包工具，它可以捕获网络中的数据包，并对这些数据包进行详细的分析。Wireshark 支持多种网络协议，包括 TCP、UDP、HTTP、DNS 等，它可以帮助用户诊断网络问题、分析网络流量、检测网络安全等。