UD5工具箱
HTTP缓存头检测 - ETag/Cache-Control分析
输入URL，请求并分析响应中的Cache-Control、ETag等缓存策略头给出优化建议。
JS 堆内存使用监控
实时监控 V8 引擎的 JavaScript 堆内存，检测潜在内存泄漏并了解内存分布。需要基于 Chromium 的浏览器（Chrome / Edge）。
堆大小限制
-- MB
已用堆大小
-- MB
总堆大小
-- MB
使用率
0%
堆内存趋势图
暂无数据
常见问题与知识点
堆（Heap）是 JavaScript 引擎分配对象、字符串、闭包等动态数据的内存区域。与栈（Stack）不同，堆内存没有严格的结构，由垃圾回收器（GC）管理释放。performance.memory 提供的三个指标分别对应：jsHeapSizeLimit（堆最大容量）、totalJSHeapSize（已分配堆总量，包含空闲）、usedJSHeapSize（实际活跃对象占用的内存）。
performance.memory 是 Chrome 浏览器提供的非标准扩展属性，仅在基于 Chromium 的浏览器（Chrome、Edge、Opera 等）中可用。Firefox、Safari 等浏览器未实现此 API。请换用 Chrome 访问本工具。
如果 usedJSHeapSize 长期接近 jsHeapSizeLimit，可能发生内存泄漏或页面占用过大。可使用 Chrome DevTools 的 Memory 面板分析堆快照，或检查是否存在未清理的定时器、闭包、全局变量等。本工具提供的“模拟分配”按钮可帮助验证 GC 是否能正常回收临时对象。
强制 GC 需要浏览器启动时添加
--js-flags="--expose-gc" 参数，此时 window.gc 才可用。在生产环境中没有此方法，通常 GC 会自动触发。单击此按钮仅作为测试辅助，若不可用会提示用户。
开启监控后，长时间观察图表。如果 usedJSHeapSize 持续上升且 GC 后不回落，可能表示存在内存泄漏。结合“模拟分配”按钮反复分配内存，观察 GC 后是否能恢复到释放前水平，若不能则表明泄漏。
空值安全模拟器 - JS可选链与默认值测试
输入嵌套对象和取值路径，测试?.可选链和??空值合并运算的结果，学习JS新特性。
JavaScript 闭包可视化 - 作用域链与环境记录
编写嵌套函数并单步执行，直观展示每个函数的作用域和闭包变量。
JavaScript循环性能测试 - 比较多种写法
在浏览器中即时测试for、forEach、map、for-of等循环的执行速度，帮助选择最优写法。
前端错误监控面板 - 捕获并展示 JS 异常
监听全局错误事件和未处理的 Promise 拒绝，在仪表板上展示错误堆栈和发生次数。
CSS 伪类效果测试场 - 实时查看 :is() :where() :has()
编写带有伪类的选择器，实时高亮匹配的HTML元素，探索现代CSS选择器的能力。
JavaScript this 上下文测试器 - 不同调用方式下的指向
编写函数并选择调用方式（普通、方法、call、apply、箭头等），输出 this 的值。
内存分页替换模拟 - FIFO/LRU/OPT动画
设定物理页框数，输入页引用串，动画展示不同页面置换算法的缺页率。
悬停提示框生成器 - 纯CSS/JS气泡样式定制
选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
Proxy 对象拦截测试 - 查看 get/set 钩子触发
创建一个 Proxy，定义各种陷阱函数，操作对象时实时显示被拦截的属性和行为。
内联样式提取合并工具 - 汇总 style 属性为类
提取 HTML 中所有内联 style，智能合并相同样式生成 class，并替换为类名以减小体积。
HTTP 响应头获取器 - 查看任意 URL 的 Header 详情
输入 URL，通过前端代理或 CORS 配置获取并显示完整的响应头信息。
URL参数可视化提取 - 分层解析查询串
粘贴带参数的URL，以表格形式列出所有Query参数与值。
JSON 差异对比器 - 高亮增删改节点
输入新旧JSON，并排展示增删改的行级差异，辅助接口变动追踪。
CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果
应用 contain 的各种值（layout, paint, size），直观对比开启前后渲染和布局的变化。
CSS属性兼容性表格 - 按使用率排序
搜索CSS属性和选择器，展示在主流浏览器的支持版本和全局使用率百分比。
HTML内联样式提取器 - 批量整理为独立CSS
提取HTML中内联style属性或嵌入式style标签，转变为独立CSS规则，辅助样式重构。
滚动驱动动画生成器 - Scroll-timeline代码
配置基于滚动位置触发的CSS @scroll-timeline动画，复制适配代码。
顶级 await 演示 - 在模块顶层使用异步
在 ES 模块中直接使用顶层 await，观察执行顺序和依赖加载。
浏览器默认样式查看器 - HTML元素User Agent
模拟显示各个HTML元素在典型浏览器中的默认CSS属性表，辅助CSS Reset决策。
Query String解析器 - URL参数编码解码
将URL查询字符串转换为键值对对象，编辑并重新生成编码后的查询参数，支持多层嵌套。
Web Worker计算演示 - 后台斐波那契不卡顿
在主线程和Worker中分别计算大斐波那契数，对比界面的响应度。
JSON 数据转 HTML 表格 - 嵌套折叠与排序
将 JSON 数组或对象渲染为可交互的 HTML 表格，支持嵌套展开、列排序和搜索。
定期后台同步测试器 - 模拟周期性后台更新
注册一个周期性后台同步，模拟触发并显示更新数据。
CSS 自定义属性演练场 - 动态修改 var() 看效果
定义多个 CSS 自定义属性，通过滑块或颜色选择器实时修改并查看页面整体风格变化。
Webpack 打包分析器 - stats.json 可视化
上传 webpack 的 stats.json，生成交互式树状图、模块大小排名，辅助优化构建体积。
package.json 文件检查器 - 验证字段与依赖规范
粘贴 package.json 内容，检查必填字段、许可证合规、依赖版本格式等常见问题。
CSS Reset代码生成器 - 统一默认样式重置
勾选或调整所需的重置元素（盒模型、边距等），生成自定义CSS Reset片段，确保跨浏览器一致性。
CSS兼容性速查 - 属性在各浏览器支持图表
搜索CSS属性，显示其在主流浏览器的支持范围和前缀需求，快速避免踩坑。