Webpack 打包分析器 - stats.json 可视化
上传 webpack 的 stats.json,生成交互式树状图、模块大小排名,辅助优化构建体积。
UD5工具箱
上传 webpack 的 stats.json,生成交互式树状图、模块大小排名,辅助优化构建体积。
获取和释放命名锁,观察多个标签页如何排队等待资源访问。
粘贴带参数的URL,以表格形式列出所有Query参数与值。
输入 gRPC 服务地址和方法,构造 JSON 请求体,观察转为二进制帧并接收响应解码。
输入 URL,通过前端代理或 CORS 配置获取并显示完整的响应头信息。
编写嵌套函数并单步执行,直观展示每个函数的作用域和闭包变量。
在开发环境中模拟 periodicSync 事件,触发后查看 SW 中的处理逻辑和网络请求。
粘贴JSON对象,生成可折叠的树形视图,点击节点复制其键值路径,方便调试。
添加、列出和删除内容索引中的条目,展示离线可用内容。
在主线程和 Worker 之间使用 SharedArrayBuffer 和 Atomics 进行同步通信。
可视化选择操作(访问、点击、断言等),自动生成 Cypress 测试代码。
通过 iframe 或 Web Components 将多个独立前端应用组合到同一个页面,展示微前端概念。
向指定 Webhook URL 发送自定义 JSON 负载,查看响应状态码和内容,记录发送历史。
粘贴 package.json 内容,检查必填字段、许可证合规、依赖版本格式等常见问题。
通过Service Worker或本地fetch模拟拦截和转发请求,查看修改后的请求响应。
在可视化环境中编写JSONPath或JMESPath表达式,实时高亮匹配结果并查看路径提取逻辑。
手动构建HTTP请求,选择方法,填写头和主体,发送并查看完整响应。
编写主线程和 Worker 内的逻辑模板,自动生成分离的 JS 文件代码,加速 Worker 开发。
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性,实时观察布局变化,理解弹性盒子。
编写函数并选择调用方式(普通、方法、call、apply、箭头等),输出 this 的值。
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
设定物理页框数,输入页引用串,动画展示不同页面置换算法的缺页率。
在主线程和Worker中分别计算大斐波那契数,对比界面的响应度。
上传一组图片,设定每张展示秒数和转场,生成WebM视频幻灯。
编写带有伪类的选择器,实时高亮匹配的HTML元素,探索现代CSS选择器的能力。
输入包名,通过NPM Registry API查询是否已被占用,并显示近似的包名建议。
粘贴PHP print_r或var_export输出,智能解析为有效的JSON。
将 JSON 数组或对象渲染为可交互的 HTML 表格,支持嵌套展开、列排序和搜索。
注册一个周期性后台同步,模拟触发并显示更新数据。