45 个对前端工程师有用的网站（持续更新）
更新
- 添加于
ButtonBuddy2021年2月4日 - 添加
npm semver calculatornpm trendsWebpageTest于BUNDLEPHOBIA2021年2月10日 - 添加于
PageSpeed Insights2021年2月16日 - 添加
Image - 添加 squoosh 2021年2月25日
- 新增冷却器 2021年3月18日
- 添加 {JSON} 占位符 2021年3月25日
- 添加快乐色调、CSS Peeper、获取波浪、渐变、字体缩放
- 添加 Bootstrap 5 速查表和 Devhints 7/31
- 为这篇文章创建一个网站：https://frontend-tools.vercel.app
TS/JS
Bit.dev
Bit 是一种可扩展且协作式的组件构建和复用方式。它能满足您从本地开发到跨项目集成的所有需求。https
://bit.dev/
创建应用
Create App是一个用于 webpack、Parcel 和 Snowpack 的 config.js 生成器，
支持 React、Svelte 和 Vue。https
://createapp.dev/
TypeScript Playground
TypeScript Playground 可以用来体验最新版本 TypeScript 的各项功能。https
://www.typescriptlang.org/play
JavaScript 压缩器
实际上，有一些命令行工具和功能可以压缩 JavaScript 代码，但当你不使用任何模块打包器和任务运行器时，这种方法会很有用。它使用起来很简单，只需要复制粘贴 JavaScript 代码即可。https
://javascript-minifier.com/
取消压缩（js/css/html/xml/json）
当您处理 xxx.min.js 文件并需要检查代码进行调试时，这会很有用。https
://unminify.com/
openbase
openbase 是一个非常实用的网站，当你在为项目寻找 npm 包时，可以查看其他开发者对这些包的评价。https
://openbase.io
@types 搜索
用于搜索 @types 文件的搜索引擎
https://www.typescriptlang.org/dt/search?search=
更漂亮的游乐场
https://prettier.io/playground/
JSLint
可能大多数人都用过eslintjslint，但如果你不想使用任何代码检查包，这个工具或许不错：
https://jslint.com/
JWT.IO
JSON Web Tokens (JWT) 是一种开放的、符合行业标准的 RFC 7519 方法，用于在双方之间安全地表示声明。JWT.IO
允许您解码、验证和生成 JWT。https
://jwt.io/
npm 语义版本计算器
npm 版本计算器
https://semver.npmjs.com/
npm趋势
有一个工具可以让我们查看 npm 包的趋势，例如下载量、启动量和问题数。https
://www.npmtrends.com/
捆绑恐惧症
查找将 npm 包添加到您的 bundle 的成本
https://bundlephobia.com/
CSS
CSS渐变
CSS Gradient 是一个简洁易用的免费网站和工具，可让您为网站创建渐变背景。https
://cssgradient.io/
CSS 剪切路径生成器
clip-path 属性允许你在 CSS 中通过将元素裁剪成基本形状（圆形、椭圆形、多边形或内嵌形状）或 SVG 源来创建复杂形状。https
://bennettfeely.com/clippy/
布局！
Layoutit 为网格布局生成 CSS。https
://grid.layoutit.com/
ButtonBuddy
https://buttonbuddy.dev/
无障碍按钮对比度生成器
HTML
Placeholder.com
Placeholder.com 是一个面向网页设计师的免费图片占位符服务，每年处理数十亿张图片。https
://placeholder.com/
快乐色调
Happy Hues是一个色彩灵感网站，它通过真实案例展示如何在设计项目中运用色彩。https
://www.happyhues.co/
CSS Peeper
专为设计师打造的智能 CSS 查看器
https://csspeeper.com/
梯度a
多色渐变
纯CSS代码，JPG下载，开源！
https://gradienta.io/
图像
Unsplash
PEXELS
Mazwai.com
封面
免费插图
https://freeillustrations.xyz/
Pixabay
拉开
https://undraw.co/illustrations
获得波浪
制造一些波浪（SVG）
https://getwaves.io/
速查表
Bootstrap 5 速查表🚀
https://bootstrap-cheatsheet.themeselection.com/
Bootstrap 5 类、变量和 mixin 的交互式列表。🎁 你需要的唯一一份 Bootstrap 5 速查表。🎊
德文特斯
https://devhints.io/
一个为开发者提供的速查表合集，
涵盖前端、后端等多个方面。
其他
CanIUse
favicon.io
下一个项目只需要这一个网站图标生成器。快速从文本、图像生成网站图标，或从数百个表情符号中选择。https
://favicon.io/
模式化
正则表达式入门
微型 png
Google字体
丰特洛
Websu
Websu 通过生成详细报告，帮助您优化 Web 应用程序的速度。https
://websu.io/
网页测试
衡量您的网站性能
https://www.webpagetest.org/
PageSpeed Insights
让您的网页在所有设备上都能快速加载
https://developers.google.com/speed/pagespeed/insights/
挤压
Squoosh 是一款图像压缩网页应用，可让您深入了解各种图像压缩器提供的高级选项。https
://squoosh.app/
冷却器
超快速配色方案生成器！
创建完美调色板，或从数千种精美配色方案中汲取灵感。https
://coolors.co/
{JSON}占位符
用于测试和原型设计的免费虚拟 API。http
://jsonplaceholder.typicode.com/
字体比例
Type Scale 允许我们尝试不同的比例尺。https
://type-scale.com/
