MDN Web Docs 获取器

为什么需要这个工具

Web 开发者在编写跨浏览器兼容代码时，需要频繁查阅 MDN Web Docs 的浏览器兼容性数据、Web API 参考和 CSS 属性文档。传统的手动查询方式效率低下：开发者需要在浏览器中打开多个标签页，在大量 HTML 表格中定位所需信息，然后手动将数据复制到代码中。这种方式不仅耗时，还容易引入人为错误。

此外，当开发者在离线环境（如飞机上、网络不稳定的场景）工作时，无法访问 MDN 在线文档，导致兼容性检查工作无法进行。

工作原理与核心能力

这个技能通过两个主要途径获取 MDN 数据：

• 在线查询：直接调用 MDN Web Docs 的 Yari 内容 API 和搜索索引，获取最新的浏览器兼容性数据、Web API 参考文档和 CSS 属性文档。Yari 是 MDN 的现代化内容管理系统，提供结构化的 JSON 数据接口。
• 离线查询：利用 browser-compat-data（BCD）npm 包进行本地查询。BCD 是 MDN 官方维护的浏览器兼容性数据集合，以 JSON 格式存储，开发者可以安装后完全离线使用。

关键步骤包括：

1. 根据查询类型选择在线或离线模式
2. 调用相应的 API 或查询本地 BCD 数据
3. 解析返回的 JSON 数据结构
4. 提取所需的兼容性指标（如支持的浏览器版本、部分支持特性等）

适用边界与注意事项

• 网络依赖：在线查询模式需要稳定的网络连接，不适合离线开发场景
• 数据更新：在线 API 返回的是 MDN 实时数据，而 BCD 包需要手动更新才能获取最新兼容性信息
• 数据结构复杂性：MDN 的兼容性数据包含多个层级和条件判断，开发者需要理解 __compat、__warnings 等特殊字段的含义
• API 稳定性：MDN 的 Yari API 仍在持续演进，未来版本可能有 breaking changes
• 浏览器支持范围：BCD 数据覆盖主流浏览器（Chrome、Firefox、Safari、Edge 等），但对一些小众浏览器或旧版本支持有限