常用工具
好的工具可以让你工作的效率翻倍，同时开发中优先使用已有的开源方案会让你的项目运行地更稳定。在这里一定能找到令你满意的一款工具。🛠
开发工具
1. RunJS
JavaScript 运行器的桌面端工具，支持 Windows、macOS、Linux 等主流平台。一边写代码一边看运行效果。还可以导入已发布的包。
2. Javascript Playground
网页版在线 JavaScript 运行器，还提供前端学习教程，以实际演练的形式。
3. iTerm2
适用于 Mac 的强大的终端工具。它比系统自带的 Terminal 好用得多。有丰富的特色功能，比如快捷键、分屏、定制终端主题颜色等。
4. 其它
- Npm 包版本查询工具 - https://semver.npmjs.com
- Svg 路径编辑器 - https://github.com/Yqnn/svg-path-editor
- Chrome 历史版本下载 - https://www.chromedownloads.net
- CSS 渐变背景案例 - https://webgradients.com
绘图工具
1. Excalidraw
手绘效果白板绘图工具，支持在线协同，拥有丰富的素材库，开源，支持自行搭建或魔改。
预览地址：
- 英文：https://excalidraw.com
- 中文（支持中文手绘字体）：https://handraw.top
2. Svg drawing
一个用于轻松绘制草图和重播的画布，可导出 SVG 格式
4. 其它
- favicon.io - 生成网页图标工具 - https://favicon.io
- Favicon - Favicon Generator - https://realfavicongenerator.net
- Icon Maker - 软件图标制作工具 - https://icon.ray.so
- Custom Shape Dividers - 生成特殊形状 SVG 用于图片分隔组合的工具 https://www.shapedivider.app
- text-to-handwriting - 将文字转成手写版导出图片 - https://github.com/saurabhdaware/text-to-handwriting
- BGJar - 多种图案背景图生成工具 - https://bgjar.com
- EZGIF - gif 和 video 文件互转 - https://ezgif.com
- Color4Bg - 免费的抽象艺术风彩色背景 - https://www.color4bg.com/
截图工具
1. Snipaste
一款强大的截图工具，基本涵盖截图所需的所有场景。强烈推荐！！！
特性：
- 完全免费，也可以解锁专业版
- 方便对图像进行标注，各种画图工具和模糊处理
- 可以将剪贴板中的内容转化为图片，包括文本、图片、HTML 文本，图片窗口控制，方便取色，贴图分组等功能
- 截图时能自动检测界面元素区域，精准控制鼠标的移动操作，内含取色器，同时支持分屏，历史记录回访
支 持平台：
- Windows
- Mac
- Linux（开发中）
官网：https://zh.snipaste.com
下载地址：https://zh.snipaste.com/download.html
2. FastStone Capture
Window 平台一款强大的截图软件，囊括屏幕录制、滚动截图、高清长图、图片编辑、图片转 PDF 格式、视频转 Gif、屏幕取色等功能。
了解更多详见我的另一篇文章 Windows 平台好用的截图软件 FastStone Capture
占位图片
我们做案例演示，或者开发一时找不到素材图片，可以使用如下的一些免费的图片服务，只需要一个链接携带参数，就可以返回指定大小或样式的图片。
录屏工具
asciinema
终端命令行录屏工具。当你仅仅需要对命令行操作进行录屏时，这个轻量，没有任何界面的工具会对你的终端进行录屏，并将视频自动上传到 https://asciinema.org 这个网站上。
供你下载使用。你也可以从这个网站上看到别人上传的一些有意思的视频。
目前仅支持 Mac 平台。
Kap
Mac 端的录屏工具，支持导出 Gif 格式的图片。支持 Mac M1 芯片设备。
二维码生成工具
- QRBTF - https://qrbtf.com
- 艺码 - https://yima.me
- Anthony Fu's QR Toolkit - https://qrcode.antfu.me
- QR Code generator library - https://www.nayuki.io/page/qr-code-generator-library
统计工具
1. Shields.io
在线统计工具，支持多种徽章样式，可以网页图片标签或 Markdown 语法中使用。
2. Github Star History
生成 Github 仓库 Star 历史变化趋势图，通过 URL 传入参数：仓库的名称
3. Github Commit History
以图片的格式展示 Github 上用户月度提交频次图表。
https://github.com/2016rshah/githubchart-api
写作工具
Markdown 转富文本
- 墨滴 - https://www.mdnice.com
- Markdown Formatter - mardkown 转微信公众号、知乎、掘金等平台样式 - https://wechat.bmpi.dev
- Md2All - http://md.aclickall.com
- 微信 Markdown 编辑器 - https://md.openwrite.cn
Markdown 排版
- Pangu-Markdown-VSCode - VSCode 中 Markdown 格式化工具 - https://marketplace.visualstudio.com/items?itemName=zhuyuanxiang.pangu-markdown-vscode
在线图片生存导出
- Coverview - 给文章制作封面图 - https://coverview.vercel.app
- Screenzy - 截图美化，添加背景和浏览器边框 - https://screenzy.io
- Mockuphone - 套壳软件，给图片增加手机、平板、Mac、Watch等设备的外壳 - https://mockuphone.com
- Shots - 各种设备套壳图片制作，各种特效图片制作 - https://shots.so/
代码图片工具
- carbon - https://carbon.now.sh
- ray.so - Create beautiful images of your code - https://ray.so
- codeimg - https://codeimg.io
工具合集
- 帮小忙 - 腾讯QQ浏览器在线工具箱 - https://tool.browser.qq.com
- MikuTools - 一个轻量的工具集合 - https://tools.miku.ac
- 先用AI - AI 工具合集 - https://ai.97866.com
- IMAGEONLINE.CO - 在线铅笔素描您的照片（Web 版） - https://pencilsketch.imageonline.co/index-cn.php
- 零代码工具箱 - 专为前端打造 - https://lingdaima.com
科学上网
- Clash for MacOS/Windows - https://github.com/Fndroid/clash_for_windows_pkg
- V2rayN for Windows - https://github.com/2dust/v2rayN
- Shadowsocks
- Shadowsocks for Windows - https://github.com/shadowsocks/shadowsocks-windows
- Shadowsocks for MacOS - https://github.com/shadowsocks/ShadowsocksX-NG