GraphQL Playground 轻量版 - 在线查询与Schema浏览
输入GraphQL端点或粘贴Schema,即可编写查询并查看自动补全与响应,适合接口探索与学习。
UD5工具箱
{"Authorization": "Bearer your-token-here"}。也支持 API Key 方式:{"x-api-key": "your-key"}。$variableName: Type 声明变量,然后在 变量 标签页中以 JSON 提供值。例如查询:query($id: ID!) { user(id: $id) { name } },变量:{"id": "123"}。变量使查询可重用且安全。输入GraphQL端点或粘贴Schema,即可编写查询并查看自动补全与响应,适合接口探索与学习。
将 CSS Grid 容器和项目的属性以图形化卡片展示,点击查看具体效果和代码。
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
为页面上使用CSS Grid的元素显示网格线和名称,辅助布局开发和调试。
使用新的迭代器辅助方法链式处理数据,查看懒求值效果。
输入 HTML 或网址,提取所有标题标签,生成文档大纲树,检测跳跃和缺失。
完整展示HTTP状态码及其含义,按类别分组,支持搜索,是前端和后端开发常用的快速参考。
粘贴结构化数据代码,模拟Google结构化数据测试,检查错误与丰富结果。
编写带有伪类的选择器,实时高亮匹配的HTML元素,探索现代CSS选择器的能力。
在任意网页上投射可拖拽调整的栅格覆盖线,用来测量和对齐设计稿。
随机可视化Skip List的层级结构和快速查找过程,对比链表效率。
搜索CSS属性,显示其在主流浏览器的支持范围和前缀需求,快速避免踩坑。
粘贴带参数的URL,以表格形式列出所有Query参数与值。
可视化Flexbox容器和子项的所有属性及选项,鼠标悬停预览效果。
添加、列出和删除内容索引中的条目,展示离线可用内容。
可视化选择操作(访问、点击、断言等),自动生成 Cypress 测试代码。
输入OpenID Provider域名,自动请求 .well-known/openid-configuration 并格式化显示。
在线YAML与JSON格式互相转换,适用于配置文件与数据交换,前端解析安全快速。
获取和释放命名锁,观察多个标签页如何排队等待资源访问。
在可视化环境中编写JSONPath或JMESPath表达式,实时高亮匹配结果并查看路径提取逻辑。
显示文本中的非换行空格、全角空格等隐藏字符映射。
输入HEX,从内置的Pantone色库中寻找最接近的彩通色号及名称。
输入 URL,通过前端代理或 CORS 配置获取并显示完整的响应头信息。
载入简单控制网格,执行 Catmull-Clark 细分一次,观察光滑效果。
快速检测系统是否支持特定的URL Scheme(如mailto:、tel:、tg:)。
上传 webpack 的 stats.json,生成交互式树状图、模块大小排名,辅助优化构建体积。
在后台 Worker 中计算大范围内的质数,主线程实时绘制进度条,展示多线程优势。
在线正则表达式测试工具,支持JavaScript正则匹配、替换、提取等操作,即时显示匹配结果和高亮。
输入网站 URL,提取所有 favicon 声明并模拟不同分辨率下的渲染效果。
提取HTML中内联style属性或嵌入式style标签,转变为独立CSS规则,辅助样式重构。