CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
UD5工具箱
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
为页面上使用CSS Grid的元素显示网格线和名称,辅助布局开发和调试。
粘贴JSON对象,生成可折叠的树形视图,点击节点复制其键值路径,方便调试。
在网格上设置起点/终点和障碍,动态演示广度优先、深度优先、A*等搜索过程。
展示几组在各类色盲下仍可区分的定性数据配色方案,含Hex码。
输入 HTML 或网址,提取所有标题标签,生成文档大纲树,检测跳跃和缺失。
可视化Flexbox容器和子项的所有属性及选项,鼠标悬停预览效果。
设定物理页框数,输入页引用串,动画展示不同页面置换算法的缺页率。
创建带有复选框或标签的多选下拉列表,支持删除已选项,键盘可全控。
拖拽调节Flex容器和子项属性,即时可视化响应效果,同时显示CSS代码,边学边用。
获取和释放命名锁,观察多个标签页如何排队等待资源访问。
在画布上放置多个色点,颜色平滑插值形成类似矢量网格渐变的梦幻背景。
展示多种风格的<input type=range>样式,一键复制定制代码。
拖放 lcov.info 文件,以颜色标示每行代码的覆盖状态。
在可缩放网格上选区颜色绘制像素图,支持多帧预览简单动画。
在线生成可折叠的手风琴面板,自定义标题、内容与图标,支持纯CSS或简单JS切换。
上传 webpack 的 stats.json,生成交互式树状图、模块大小排名,辅助优化构建体积。
输入标题文本,尝试不同容器宽度,手动插入<br>或使用text-wrap:balance显示效果。
上传两张图片,实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
提供数十种精致SVG背景纹理,可调颜色,生成CSS背景代码或下载SVG。
展示Navigator.connection提供的网络类型、下行速度、RTT等实时信息,辅助自适应加载。
选择任意基色,自动计算互补色、分裂互补及三分色,提供十六进制代码,一键复制。
输入 gRPC 服务地址和方法,构造 JSON 请求体,观察转为二进制帧并接收响应解码。
添加多个阴影层,独立调节每层的偏移、模糊、扩展和颜色,创造复杂立体效果。
提取HTML中所有内嵌 `<style>` 标签的内容,合并生成单独CSS文件。
为图片添加类似胶片漏光的红黄色调渐变或光晕效果,营造怀旧氛围。
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
将 JSON 数组或对象渲染为可交互的 HTML 表格,支持嵌套展开、列排序和搜索。
绘制或生成迷宫墙,选择DFS或BFS算法自动寻找出口,动画展示探索过程。
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。