Appearance
在线工具
收录前端开发常用的在线工具,覆盖代码调试、格式转换、兼容性查询、性能分析等场景,无需安装,打开即用。
代码调试与格式化
RegExr
正则表达式在线调试工具,支持实时高亮匹配结果,左侧可输入表达式和测试文本,右侧详细展示每个捕获组的匹配内容。内置常用正则表达式速查表,并对每个语法符号提供悬停说明,是学习和调试正则的最佳工具。
适合场景:表单验证、字符串处理、日志解析的正则调试。
JSON Crack
将 JSON、YAML、XML、CSV 等数据结构以可视化节点图形式展示,层次关系一目了然,支持搜索节点、展开/折叠分支,极大提升复杂嵌套数据的可读性,同时支持格式互转。
适合场景:调试复杂 API 响应、理解深层嵌套数据结构。
Transform.tools
多格式代码转换工具集合,支持 JSON → TypeScript 类型、SVG → React 组件、CSS → JS 对象、GraphQL → TypeScript 等数十种转换,省去手动改写的繁琐工作,是日常开发中提升效率的实用工具。
适合场景:接口类型自动生成、跨格式代码迁移。
Prettier Playground
Prettier 官方在线格式化工具,支持 JavaScript、TypeScript、HTML、CSS、Markdown 等格式,可实时调整 Prettier 配置参数(缩进宽度、分号、引号等)并预览格式化结果,方便团队统一确认格式化规则。
适合场景:验证格式化规则、快速格式化代码片段。
兼容性查询
Can I Use
前端开发必备的浏览器特性兼容性查询平台,涵盖 HTML、CSS、JavaScript API 及 Web 平台特性,以可视化表格展示各浏览器版本的支持情况,并显示全球用户使用率,是决策是否使用某项新特性的重要依据。
适合场景:评估新 CSS 特性/JS API 的使用风险。
Browserslist
在线解析 .browserslistrc 配置的工具,输入查询语句(如 > 1%, last 2 versions)即可看到具体覆盖的浏览器版本列表及全球用户占比,帮助精确配置 Babel、PostCSS、Autoprefixer 的目标浏览器范围。
适合场景:配置构建工具的目标浏览器范围。
图片与代码展示
Carbon
将代码生成为精美截图的在线工具,支持自定义主题、字体、背景颜色和窗口样式,导出高分辨率 PNG 或 SVG 图片,广泛用于技术文章配图、社交媒体分享和演示文稿。
适合场景:技术博客配图、演示文稿代码展示。
Ray.so
Raycast 出品的代码截图生成工具,界面极简,渐变背景效果出众,支持多种主题和语言高亮,一键导出美观的代码图片,是 Carbon 的现代化替代选择。
适合场景:需要高质感代码图片的场景。
图片处理
Squoosh
Google 出品的在线图片压缩工具,支持 WebP、AVIF、MozJPEG、OxiPNG 等多种现代格式转换,左右对比滑块直观展示压缩前后的画质差异,可在浏览器本地完成压缩(无需上传服务器),保护隐私。
适合场景:Web 图片优化、格式转换。
SVGOMG
SVG 文件在线优化工具,基于 SVGO,提供可视化的优化选项开关,实时显示压缩率和文件大小变化,通常可将 SVG 体积减少 30%~70%,是发布前优化 SVG 文件的必备工具。
适合场景:从设计工具导出 SVG 后的优化精简。
Favicon.io
Favicon 在线生成工具,支持从文字、图片或 Emoji 生成多尺寸 Favicon 图标包(.ico、PNG、Apple Touch Icon 等),一键下载,并提供对应的 HTML 引入代码,省去手动制作多尺寸图标的麻烦。
适合场景:快速为新项目生成网站图标。
包体积分析
BundlePhobia
npm 包体积在线分析工具,输入包名即可查看其压缩前/后的大小及加载时间估算,同时推荐功能相似但体积更小的替代包,帮助在引入依赖前评估对打包体积的影响。
适合场景:引入新 npm 包前的体积评估。
Package Phobia
查看 npm 包安装体积(install size)的工具,与 BundlePhobia 关注打包体积不同,此工具展示的是 npm install 后实际占用磁盘的空间大小,适合评估开发依赖的安装成本。
适合场景:评估开发工具链的安装体积。
开发辅助
DevDocs
将数百个技术文档整合到一个统一界面的离线文档查阅平台,支持 MDN、Node.js、React、Vue、CSS、Python 等几乎所有主流技术的文档,支持全局搜索和离线缓存,查阅效率远超分别访问各官网。
适合场景:日常开发的快速文档查阅。
Hoppscotch
开源的轻量级在线 API 调试工具(Postman 的 Web 替代品),支持 REST、GraphQL、WebSocket、gRPC 等多种协议,无需安装客户端,界面简洁,同样支持团队协作和环境变量管理。
适合场景:快速调试 API 接口。
Crontab Guru
Cron 表达式在线解析与生成工具,输入 Cron 表达式即可用自然语言描述其含义,也可通过交互界面生成表达式,并展示最近几次的执行时间,彻底告别记不住 Cron 语法的困境。
适合场景:配置定时任务、验证 Cron 表达式。
Epoch Converter
Unix 时间戳与日期时间互转工具,支持毫秒/秒级时间戳的解析和转换,提供多种编程语言获取当前时间戳的代码示例,是后端调试接口时间字段的常用辅助工具。
适合场景:调试接口中的时间戳字段。