GraphQL Playground 轻量版 - 在线查询与Schema浏览

等待发送查询...

最新

GraphiQL 在线查询工具 - 交互式 GraphQL 探索

连接任意 GraphQL 端点，提供智能补全、文档浏览和查询执行，类似于 GraphiQL 界面。

API GraphQL Schema 查询 测试

最新

CSS Grid 可视化速查表 - 所有属性一览

将 CSS Grid 容器和项目的属性以图形化卡片展示，点击查看具体效果和代码。

CSS CSS Grid 可视化 属性 速查

HTTP状态码参考表 - 在线查询含义与分类

完整展示HTTP状态码及其含义，按类别分组，支持搜索，是前端和后端开发常用的快速参考。

开发工具 HTTP 参考 状态码

CSS Grid 调试覆盖层 - 显示网格线与区域

在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。

开发工具 Grid 可视化 覆盖层 调试

CSS 伪类效果测试场 - 实时查看 :is() :where() :has()

编写带有伪类的选择器，实时高亮匹配的HTML元素，探索现代CSS选择器的能力。

CSS CSS :has 伪类 选择器

最新

Iterator Helpers 演示 - map/filter/take 在迭代器上的应用

使用新的迭代器辅助方法链式处理数据，查看懒求值效果。

JavaScript Helpers Iterator 演示 迭代器

CSS Grid可视化调试器 - 叠加网格线

为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。

前端设计 CSS Grid 可视化 调试

JSON 查询演练场 - JMESPath/JSONPath 即时评测

在可视化环境中编写JSONPath或JMESPath表达式，实时高亮匹配结果并查看路径提取逻辑。

JSON JMESPath JSON JSONPath 查询

URL参数可视化提取 - 分层解析查询串

粘贴带参数的URL，以表格形式列出所有Query参数与值。

开发工具 URL 参数 提取 解析

热门

Brainfuck在线解释器 - 步进调试

编写Brainfuck代码，以可视化的方式步进执行，观察活动纸带和指针。

开发工具 Brainfuck 解释器 调试

结构化数据测试 - 粘贴代码实时预览

粘贴结构化数据代码，模拟Google结构化数据测试，检查错误与丰富结果。

SEO工具 JSON-LD Schema 测试 结构化数据

URL Scheme测试器 - 自定义/常见协议

快速检测系统是否支持特定的URL Scheme（如mailto:、tel:、tg:）。

开发工具 URL 协议 检测

NPM包名可用性查询 - 内置类似名称检查

输入包名，通过NPM Registry API查询是否已被占用，并显示近似的包名建议。

开发工具 npm 包名 检查

最新

Cypress 测试场景构建器 - 点选生成测试代码

可视化选择操作（访问、点击、断言等），自动生成 Cypress 测试代码。

开发工具 Cypress 场景 构建器 测试

内容索引 API 查看器 - 管理离线可用内容列表

添加、列出和删除内容索引中的条目，展示离线可用内容。

PWA API PWA 内容索引 离线

URL协议处理器检查 - 自定义协议是否注册

检测浏览器是否支持特定自定义协议（如mailto:, tg:），并尝试调用。

检测工具 URL 协议 检测

Flexbox属性速查 - 可视对照表

可视化Flexbox容器和子项的所有属性及选项，鼠标悬停预览效果。

前端设计 Flexbox 属性 速查

布局网格覆盖层 - 可拖调栅格参考线

在任意网页上投射可拖拽调整的栅格覆盖线，用来测量和对齐设计稿。

前端设计 参考线 布局 网格

热门

Webpack 打包分析器 - stats.json 可视化

上传 webpack 的 stats.json，生成交互式树状图、模块大小排名，辅助优化构建体积。

开发工具 Webpack 体积 打包分析 模块

页面标题层级分析器 - h1~h6 结构检查

输入 HTML 或网址，提取所有标题标签，生成文档大纲树，检测跳跃和缺失。

SEO 大纲 层级 无障碍 标题

最新

package.json 文件检查器 - 验证字段与依赖规范

粘贴 package.json 内容，检查必填字段、许可证合规、依赖版本格式等常见问题。

Node.js package.json 检查 规范 验证

JSONPath在线查询工具 - JSON数据路径提取

使用JSONPath表达式从复杂JSON中快速提取数据子集，支持实时匹配和高亮显示结果。

开发工具 JSON JSONPath 查询

ARIMA 时间序列预测模拟 - 手动调整参数趋势

提供历史数据，手动设定自回归/差分/移动平均阶数，查看拟合与未来几步预测，学习时序分析。

数据科学 ARIMA 时间序列 统计 预测

OpenID Connect Discovery 浏览器 - 获取身份配置

输入OpenID Provider域名，自动请求 .well-known/openid-configuration 并格式化显示。

开发工具 Discovery OIDC 身份 配置

最新

HTTP 响应头获取器 - 查看任意 URL 的 Header 详情

输入 URL，通过前端代理或 CORS 配置获取并显示完整的响应头信息。

开发工具 HTTP 响应头 获取 调试

CSS兼容性速查 - 属性在各浏览器支持图表

搜索CSS属性，显示其在主流浏览器的支持范围和前缀需求，快速避免踩坑。

前端设计 CSS 兼容性 浏览器

Web Locks API 探索器 - 跨标签页资源协调

获取和释放命名锁，观察多个标签页如何排队等待资源访问。

JavaScript Web Locks 协调 资源 锁

YAML与JSON在线互转工具

在线YAML与JSON格式互相转换，适用于配置文件与数据交换，前端解析安全快速。

开发工具 JSON YAML 转换

CSS缓动函数试玩场 - 所有预设一览

并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。

前端设计 CSS 动画 缓动

彩通近似色查找 - HEX到Pantone近似匹配

输入HEX，从内置的Pantone色库中寻找最接近的彩通色号及名称。

前端设计 Pantone 彩通 颜色