网络

浏览器兼容性检测器

检测当前浏览器对 Web API、CSS、JavaScript、媒体、存储、安全上下文和设备能力的真实支持情况。适合发布前检查、跨浏览器问题排查、客户环境验收，以及设计降级方案。

  • 按概览、图形、媒体、存储、设备、安全和前端功能分类查看结果
  • 不只依赖浏览器版本，而是检测当前页面环境实际暴露出来的能力
  • 提供主流浏览器版本参考，方便制定支持范围和回归处理策略
  • 结果可复制到 issue、QA 报告、发布检查清单和客户验收记录中
  • 支持全屏工作区，适合团队评审和复杂兼容性排查
工具/浏览器兼容性检测器
概览
点击运行检测，查看当前环境的浏览器能力结果。
命令

功能简介

用于生产发布检查、回归 QA 和事故排查。当你更关心真实运行能力，而不是单纯的浏览器名称时，这个工具会更有用。

  1. 01

    当前环境能力检测

    确认 API 是否暴露、是否可查询，以及是否受到安全上下文、权限状态或页面策略影响。

  2. 02

    Web 平台 API 诊断

    覆盖权限、剪贴板、存储、网络、安全和设备能力，帮助区分不支持、部分支持和未知状态。

  3. 03

    CSS 和 JavaScript 功能检查

    检查 container queries、选择器、嵌套、模块加载、structuredClone、BigInt 等现代前端能力。

  4. 04

    媒体和图形能力验证

    确认实时通信、录制、屏幕共享、图形渲染、视频 codec 以及常见音视频播放支持情况。

  5. 05

    主流浏览器版本参考

    对照 Chrome、Edge、Firefox、Safari 的支持版本，辅助制定最低支持策略和发布兼容性矩阵。

  6. 06

    可复制的记录和基线

    输出可用于 QA 报告、发布检查清单、issue、客户验收和长期兼容性基线。

如何使用

先确定支持目标，再运行检测、排序风险、选择降级行为，最后在真实设备和实际产品流程中确认。

  1. 01

    先定义目标浏览器、最低版本、移动端覆盖范围，以及必须保持可用的产品流程。

  2. 02

    运行分类检测，获取图形、媒体、存储、安全、设备和前端功能的运行时快照。

  3. 03

    按对登录、支付、上传、播放、分享等关键流程的影响，优先处理不支持和部分支持项。

  4. 04

    结合版本参考，判断是否需要兼容代码、降级路径、服务端处理或 feature flag。

  5. 05

    在真实设备和接近真实的网络环境中复测，确认权限、安全上下文、响应头和硬件限制。

  6. 06

    把结果记录到发布检查清单和回归测试中，形成可复用的兼容性治理材料。

功能说明

覆盖最容易带来发布风险的领域，并用便于判断和复用的结构展示结果。

  • 在当前页面环境中实时检测浏览器能力，而不是做静态猜测
  • 检测位置、剪贴板、通知、安全上下文和 cross-origin isolation 等涉及权限和安全前提的能力
  • 检查渲染、实时通信、录制、codec、画中画和屏幕共享等媒体与图形能力
  • 检查 localStorage、sessionStorage、IndexedDB、Cache API、离线行为和容量估算等存储相关能力
  • 检查 CSS Grid、Container Queries、:has()、CSS Nesting、View Transitions 和 viewport units 等现代 CSS
  • 检查 ES Modules、dynamic import、structuredClone、BigInt、URLPattern 和 Intl.Segmenter 等现代 JavaScript
  • 提供 Chrome、Edge、Firefox、Safari 版本参考，辅助工程判断
  • 输出可复制结果，便于协作、缺陷跟踪、发布评审和审计留痕

适合哪些场景

当你需要把发布风险、浏览器身份、真实功能可用性和用户反馈问题放在一起判断时，它会很有用。

  1. 发布前浏览器兼容性验证

    上线前根据你的支持矩阵做结构化检查，降低生产环境风险。

  2. 浏览器相关事故排查

    针对白屏、控件失效、媒体播放失败等反馈，用能力检测结果作为排查证据。

  3. 关键流程加固

    检查认证、支付、上传管线和媒体播放链路的兼容性风险。

  4. 媒体和实时能力准备检查

    启用通信功能前，先确认 WebRTC、录制、codec 和屏幕共享支持情况。

  5. 现代 CSS 采用风险评估

    采用 container queries、:has()、原生 nesting 等功能前，先评估支持影响。

  6. 降级策略设计

    把不支持和部分支持结果映射到兼容代码、替代 API 或 feature flag 计划中。

  7. 扩展回归测试范围

    把高风险兼容性发现转成有针对性的自动化或手工测试用例。

  8. 跨团队决策对齐

    让前端、QA、产品和平台团队共享同一份兼容性基线。

延伸阅读

如果问题报告里只有原始 UA 字符串或服务端日志行，请先用 User-Agent 解析 规范化浏览器、OS、设备和 bot 环境。如果问题发生在 callback、redirect 或 deep link 之后，可以同时使用 URL 工具 ，把 URL 结构和运行时能力证据放在同一次排查里。

使用建议

兼容性诊断只有和发布门槛、用户影响、业务指标结合起来，才真正有价值。

  • 先定义清晰的支持策略：目标浏览器、最低版本和移动端限制。
  • 按影响程度分类结果：转化阻断、体验降级、可接受差异。
  • 对高影响的不支持能力，准备真正可执行的降级方案。
  • 把兼容性验证加入 Pull Request 评审和发布前验收清单。
  • 涉及权限的 API，必须同时测试已允许和已拒绝两种状态。
  • 媒体和图形能力受硬件、OS、解码器、GPU 影响较大，应在多种环境中复测。
  • 对安全敏感 API，要同时确认 HTTPS、CSP、COOP / COEP、cross-origin policy 等部署前提。
  • 修复优先级要结合用户影响和关键漏斗完成率来判断。

边界与注意事项

这个工具提供的是运行时能力快照，不能替代完整业务流程的端到端验证。

  • OS 版本、硬件配置、企业策略和浏览器发布渠道都会影响实际表现。
  • 需要权限的 API 可能看起来可用，但在用户授权前仍无法真正使用。
  • 显示支持并不代表生产环境一定正确，还需要验证参数、时序和错误路径。
  • 媒体和图形结果可能受硬件加速、codec 包和驱动栈影响。
  • MDN 兼容性数据只是参考背景，不等于当前页面环境一定可用。
  • 最终是否发布，仍需要在真实环境中做端到端验证。

常见问题

这里整理了使用方式、数据处理、结果确认和实际限制方面的常见问题。

为什么有些 API 显示为部分支持？

接口本身可能存在，但行为会受到权限、flag、平台限制或策略影响，因此只能算部分支持。

为什么我的环境和用户环境支持情况不同？

浏览器版本、OS、设备、管理策略和隐私设置都可能显著改变运行时能力。

它能替代真实产品流程测试吗？

不能。它是快速兼容性分诊层，最终仍要配合端到端验证。

MDN 参考和运行时结果不一致时看哪个？

判断当前环境时，以运行时检测为准；MDN 主要作为版本背景参考。

为什么权限相关 API 的结果看起来不稳定？

它们依赖用户授权状态和浏览器上下文限制，这些状态可能随时间或操作变化。

发布流程里应该怎么用这些结果？

把不支持和部分支持项整理成发布风险，并要求关键路径上的风险必须有缓解方案。

可以帮助调试 CSS 兼容性吗？

可以，尤其适合检查 container queries、:has()、CSS nesting、viewport units 等现代 CSS 功能。

可以帮助排查媒体能力吗？

可以。它覆盖 codec、录制、WebRTC 和屏幕共享相关能力。

移动端浏览器也能用吗？

可以。为了得到准确结果，请直接在目标移动设备和浏览器版本上运行。

为什么要重复运行检测？

部分 API 受上下文和权限状态影响，改变条件后重复检测能提高判断可信度。

适合长期兼容性治理吗？

适合。可以按发布周期保存基线快照，用于持续兼容性管理。

它和 User-Agent 解析怎么配合？

UA 工具用于整理环境身份信息；这个检测器用于验证真实能力，两者结合可以提高排查准确度。

应该优先检查哪些能力？

先检查直接影响关键路径的能力，例如认证、存储、网络请求、媒体播放和采集。

最低可接受兼容性水平怎么定义？

以用户是否能完成核心任务为准。即使增强功能不可用，也要保证主要操作可以完成。

能指导性能相关功能的灰度吗？

可以。WebWorker、WebAssembly、WebCodecs 等高级能力可以根据检测结果决定是否开启。

不支持就一定要放弃功能吗？

不一定。可以根据用户群和业务价值，通过降级逻辑、分阶段发布或 feature flag 提供功能。

可以用于企业或客户环境验收吗？

可以。直接在客户真实浏览器环境中运行，并把输出保存为验收证据。

更多相关工具

当浏览器环境、链接结构和网络范围都重要时，可以搭配 URL 解析、User-Agent 解析和子网计算一起使用。