UD5工具箱
NPM 审计结果可视化 - 解析 JSON 报告
粘贴 npm audit --json 的输出，以表格和图表形式展示漏洞级别、影响包和修复建议。
拖拽 Lighthouse JSON 报告到此处
或通过以下方式加载报告文件
常见问题
什么是 Lighthouse？
Lighthouse 是 Google 开发的一款开源自动化工具，用于改善网页质量。它可以对网页进行性能、可访问性、最佳实践、SEO 和 PWA 等方面的审计，并生成详细的 JSON 报告。您可以在 Chrome DevTools、命令行或通过 PageSpeed Insights 运行 Lighthouse。
如何获取 Lighthouse JSON 报告？
有多种方式获取 JSON 报告：
1. Chrome DevTools：打开 DevTools → Lighthouse 面板 → 点击"Generate report" → 点击右上角下载按钮选择 JSON 格式。
2. 命令行：运行
3. PageSpeed Insights：在线运行后下载报告。
1. Chrome DevTools：打开 DevTools → Lighthouse 面板 → 点击"Generate report" → 点击右上角下载按钮选择 JSON 格式。
2. 命令行：运行
lighthouse https://example.com --output json --output-path report.json3. PageSpeed Insights：在线运行后下载报告。
Lighthouse 各项分数的含义是什么？
Lighthouse 分数范围为 0-100：
• 90-100（绿色）：优秀，表现良好。
• 50-89（橙色）：需要改进，存在优化空间。
• 0-49（红色）：较差，需要重点关注。
每个类别（性能、可访问性、最佳实践、SEO、PWA）独立评分，权重各不相同。
• 90-100（绿色）：优秀，表现良好。
• 50-89（橙色）：需要改进，存在优化空间。
• 0-49（红色）：较差，需要重点关注。
每个类别（性能、可访问性、最佳实践、SEO、PWA）独立评分，权重各不相同。
为什么我的 PWA 分数显示为"不适用"？
如果您的网站没有配置 Service Worker、Web App Manifest 等 PWA 所需的核心技术，Lighthouse 的 PWA 类别中许多审计项会显示为"不适用"（notApplicable）。这是正常的，意味着这些检查项与您的网站场景无关。如果您的网站确实不需要作为 PWA 运行，可以忽略这部分分数。
审计项中的"informative"和"manual"是什么意思？
• Informative（信息性）：该审计项仅提供信息，不计入最终分数，但可以帮助您了解页面的一些特征。
• Manual（手动检查）：这些项目需要人工判断，Lighthouse 无法自动评估，需要开发者自行检查确认。
• Manual（手动检查）：这些项目需要人工判断，Lighthouse 无法自动评估，需要开发者自行检查确认。
如何利用这个工具提升网站质量？
建议流程：
1. 上传您的 Lighthouse JSON 报告到本工具。
2. 重点关注红色和橙色标记的审计项。
3. 展开每个未通过的审计项，查看详细描述和建议。
4. 按类别逐一优化，优先处理权重较高的项目。
5. 优化后重新运行 Lighthouse 并对比报告变化。
1. 上传您的 Lighthouse JSON 报告到本工具。
2. 重点关注红色和橙色标记的审计项。
3. 展开每个未通过的审计项，查看详细描述和建议。
4. 按类别逐一优化，优先处理权重较高的项目。
5. 优化后重新运行 Lighthouse 并对比报告变化。
CSV 数据概要分析器 - 列统计与分布可视化
上传CSV文件，自动计算每列的计数、唯一值、缺失率及数值型分布直方图，快速了解数据。
Terraform 计划预览器 - 资源变更可视化
粘贴terraform plan输出，解析并显示资源的增加、更改与销毁列表，辅助审查。
前端性能最佳实践自查表 - 交互式检查清单
覆盖加载、渲染、安全、可访问性等领域的自查清单，勾选后生成得分与建议。
品牌颜色提取器 - 输入品牌名查官方色
搜索知名品牌名称，显示其标志性的官方HEX颜色代码。
网页CSS变量提取为色板 - 一键查看站点主题色
输入网址，提取页面定义的所有CSS自定义属性（颜色），生成直观调色板。
content-visibility 性能演示 - 跳过渲染不可见区域
对长列表应用 content-visibility:auto，对比启用前后渲染时间和内存占用。
图片色彩直方图查看器 - RGB/亮度通道分布
上传图片，显示红、绿、蓝及亮度通道的直方图，辅助评估曝光与色彩分布。
错误代码速查器 - 常见报错及解决建议
输入常见的报错片段，基于静态库返回常见的解释和可能的修复方案。
API状态码测试 - 快速查看HTTP响应
向任意输入URL发送请求，清晰显示响应状态码、头信息和体，类似轻量级Postman。
第三方脚本影响评估器 - 分析页面中的外部脚本
输入 URL，列出所有第三方域名的脚本，估算其对加载时间的影响。
DOM事件监控器 - 实时录制显示触发事件
记录页面交互触发的所有DOM事件及其目标、冒泡阶段，以日志和瀑布形式展示。
绩效评估报告生成 - 自评/主管评模板
结构化绩效复评表，填写目标完成与行为表现，汇总评语及等级。
图片直方图查看器 - RGB/亮度通道分析
上传图片，绘制其亮度及红绿蓝通道的直方图，辅助曝光评估。
极简衣橱胶囊规划器 - 单色搭配组合
选择核心颜色（如黑、白、燕麦），自动推荐并可视化极简衣橱的搭配方案。
隐私政策/条款生成器 - 通用法律页面模板
选择网站类型和功能，自动生成基础的隐私政策、服务条款HTML草案。
线段树区间查询演示 - 构建/更新/查询
可视化线段树的构建、单点更新和区间求和查询过程，理解树状结构。
代码语法高亮工具 - 在线代码美化展示
粘贴代码自动进行语法高亮显示，支持主流编程语言，生成带行号的HTML代码块，方便嵌入博客。
文字动画GIF生成器 - 闪烁/打字效果
输入文字，选择闪烁、打字、彩虹等动态效果，生成文字动画GIF。
CORS 预检请求测试器 - 发送 OPTIONS 分析响应
向指定 URL 发送预检请求，分析 Access-Control-* 响应头是否符合预期。
PWA启动画面生成 - 图标与背景色配置
配置启动画面背景色与图标，生成对应manifest和meta标签代码。
品牌配色方案查询 - 世界知名企业色板
搜索公司名，显示其官方主色、辅助色并复制十六进制代码。
精灵帧动画生成器 - 多图播放及CSS动画
上传序列帧图片，合成spritesheet并生成对应CSS steps()帧动画代码。
OffscreenCanvas 性能测试 - 主线程 vs Worker 渲染速度
分别在主线程和 Worker 中使用 Canvas 执行密集绘制，对比 FPS 和主线程阻塞程度。
波形音频播放器组件 - 可拖拽进度高亮
生成带有音频波形可视化、可点击跳转的可定制HTML音频播放器代码。
DOM 变更性能分析器 - 记录并统计重排重绘
开启监听后操作页面，统计 DOM 变化次数和频率，帮助定位布局抖动。
通知提示音试听 - 各种UI提醒声音
内置多种轻短的通知声音，点击试听，选择配套项目使用（提供Base64代码）。
Reflect API 使用浏览器 - 对象操作方法速查与测试
列出所有 Reflect 静态方法，提供参数输入并执行，查看返回值和副作用。
content-visibility: auto 性能演示 - 跳过渲染优化
对比启用和不启用 content-visibility: auto 时页面大量列表的渲染性能差异。
OKR目标设定板 - 目标与关键结果对齐
编写O与对应KR，可视化进度条与完成度，团队或个人目标跟踪的轻量替代。