MDN Web Docs翻译站点

它是做什么的

MDN Web Docs 是 Mozilla 官方维护的 Web 平台技术文档库，覆盖 HTML、CSS、JavaScript 及 Web API 的完整参考与教程。它不是一份速查表，而是你写代码时遇到不确定行为、查 API 参数、确认兼容性时的权威依据。

对 Vibe Coding 用户而言，MDN 的价值在于：当 AI 生成了一段你不熟悉的代码，或某个 API 用法存疑时，MDN 能提供准确的语法定义、浏览器兼容性数据和可运行的示例代码，帮助你判断 AI 输出是否正确。

核心用途

• 查 API 参考：定位具体接口的语法、参数、返回值、异常类型，例如 fetch、IntersectionObserver、CanvasRenderingContext2D。
• 确认浏览器兼容性：每个 API 页面底部都有兼容性表格，标明 Chrome、Firefox、Safari、Edge 各版本的支持情况，避免使用未普及的特性。
• 学习语言基础：HTML 元素、CSS 属性、JavaScript 语法均有系统教程，按“入门 → 进阶 → 参考”组织，适合补全知识盲区。
• 验证 AI 生成代码：将 AI 输出的 API 调用与 MDN 示例对照，检查参数顺序、事件名称、属性拼写是否正确。
• 查找 Polyfill 或替代方案：当某个特性兼容性不足时，MDN 常会提示替代写法或相关提案状态。

适合谁用

• Vibe Coding 重度用户：依赖 AI 生成前端代码，但需要人工校验逻辑与 API 用法的人。
• 前端初学者：需要一份结构清晰、示例完整的官方文档作为学习主线。
• 全栈开发者：偶尔处理前端任务，需要快速确认某个 Web API 的确切行为。
• 技术写作或教学人员：引用权威定义和示例代码时，MDN 是可靠来源。

使用建议

1. 先搜 MDN，再搜其他博客：遇到 API 疑问时，直接在站内搜索或通过搜索引擎加 site:developer.mozilla.org 限定来源。
2. 优先看“规范”和“浏览器兼容性”区块：这两个部分能最快判断代码是否可用，避免踩坑。
3. 复制示例代码到本地运行：MDN 的示例通常可直接运行，修改参数观察行为，比只看文字描述更有效。
4. 让 AI 引用 MDN 链接：在提示词中要求 AI 给出依据时附上 MDN 页面地址，便于你快速核对。
5. 注意文档版本：部分页面标注了“Deprecated”或“Experimental”，使用前确认状态，避免在新项目中引入过时写法。
6. 配合浏览器开发者工具使用：在控制台测试 API 行为，再对照 MDN 文档理解输出，能加深记忆。

常见问题：如果页面加载缓慢，可尝试英文原版页面（切换语言按钮在页脚）；若某个 API 在中文版缺失，直接访问英文版通常内容更完整。