工具合集 · 6 分钟
前端开发常用工具合集：HTML、CSS、JS、JSON 与配置转换
整理前端开发和页面调试常用在线工具，包括 HTML 格式化、CSS 格式化、JavaScript 压缩、JSON 格式化、YAML/JSON 转换和文本对比。
前端调试离不开格式化和转换
前端开发中经常需要阅读压缩后的 HTML、整理 CSS、压缩 JavaScript、查看接口 JSON、转换配置文件或比较两段代码差异。把这些工具组合起来，可以覆盖日常页面调试的大部分高频场景。
HTML 格式化：看清页面标签结构
复制来的 HTML 片段如果都挤在一行，很难判断标签层级。格式化后可以更清楚地检查嵌套关系、缺失闭合标签和页面结构。
使用 HTML 格式化CSS 格式化：整理样式和定位问题
样式规则压缩后不方便阅读，CSS 格式化可以让选择器、属性和值更清晰，适合排查样式覆盖和布局问题。
使用 CSS 格式化JavaScript 压缩：快速减少代码体积
临时代码片段、演示脚本或简单页面中的 JS 可以通过压缩减少空白和注释。复杂生产项目仍建议交给构建工具处理。
使用 JavaScript 压缩JSON 格式化：检查接口返回
前端调接口时，JSON 格式化几乎是必备工具。格式化后可以快速查看字段、数组结构和错误提示。
使用 JSON 格式化YAML / JSON 转换：处理配置文件
很多项目配置会在 YAML 和 JSON 之间切换，转换工具可以帮助快速整理简单配置内容，减少手工改写错误。
使用 YAML / JSON 转换文本对比和正则测试：辅助排查差异
当两份响应、配置或代码片段不一致时，可以先用文本对比找差异，再用正则测试提取关键字段。
使用 文本对比常见问题
前端工具合集为什么不写成单工具教程？
工具页已经提供单工具说明，合集文章更适合按开发流程组织多个工具入口。
这些格式化工具适合生产构建吗？
适合快速处理和调试，复杂项目的生产构建建议使用专业构建工具。