Back

在无 JavaScript 环境下测试您的网站:测什么和为什么

OpenReplay Team OpenReplay Team

Mar 27, 2026 · 2 min read

在无 JavaScript 环境下测试您的网站:测什么和为什么

大多数前端开发者都假设 JavaScript 始终可用。通常情况下确实如此。但这种假设悄然影响着你的构建方式——并可能导致应用程序变得脆弱,以你从未预料到的方式崩溃。

在无 JavaScript 环境下测试网站并不是为了迎合那些刻意禁用脚本的少数用户。这是一种诊断工具。它揭示了你的核心用户旅程是否完全依赖客户端执行,并迫使你认真思考当执行失败时会发生什么。

核心要点

  • JavaScript 静默失败的频率超出预期——CDN 故障、浏览器扩展、CSP 配置错误和网络超时都可能阻止脚本运行。
  • 在开发过程中禁用 JavaScript 是一种快速审计方法,可以暴露脆弱的架构决策,如非语义化导航、纯客户端表单和空 HTML 外壳。
  • 渐进增强意味着首先构建坚实的 HTML 基础,然后在其上叠加 JavaScript——而不是维护两套独立的体验。
  • Next.js、Remix 和 Astro 等现代框架支持服务端渲染,在任何客户端代码执行之前就能提供功能性 HTML。

为什么 JavaScript 失败比你想象的更频繁

JavaScript 静默失败比大多数开发者意识到的更常见。脚本在慢速移动网络上超时。像 uBlock Origin 或 NoScript 这样的浏览器扩展会阻止第三方脚本——有时连你的脚本也一并拦截。CDN 故障、内容安全策略(CSP)配置错误、type="module" 不匹配以及运行时错误都可能阻止应用程序正确初始化。

当 JavaScript 是提供导航、渲染内容或提交表单的唯一机制时,这些失败中的任何一个都会产生空白屏幕或损坏的界面。用户不会收到错误消息。他们只是离开。

无 JavaScript 测试实际揭示了什么

在开发过程中禁用 JavaScript 是对 HTML 优先基础的快速、真实的审计。以下是你通常会发现的问题:

  • 由非语义元素构建的导航。 绑定了点击处理程序的 <div> 或 <span> 会完全失效。而正确的 <a href="/page"> 仍然有效。
  • 仅在客户端验证的表单。 如果你的表单完全依赖 JavaScript 验证,并且没有指向服务器端点的 action 属性,那么没有脚本时它什么也做不了。
  • 仅在水合(hydration)后存在的内容。 在许多 React 或 Vue 单页应用中,服务器发送的是几乎空白的 HTML 外壳。没有 JavaScript,用户什么也看不到。
  • 纯粹用脚本实现的 UI 控件。 没有语义化 HTML 或原生浏览器行为构建的手风琴、模态框和选项卡面板会完全失效。

这些不是边缘情况。它们是随时间累积的架构决策。

如何在无 JavaScript 环境下测试网站

最快的方法是使用 Chrome DevTools:

  1. 打开 DevTools 并按 Cmd+Shift+P(Mac)或 Ctrl+Shift+P(Windows)。
  2. 输入 Disable JavaScript 并按回车。
  3. 重新加载页面。

或者,打开 DevTools 设置(齿轮图标),转到 Debugger,勾选 Disable JavaScript——这会在重新加载时保持生效。

通过渐进增强构建弹性前端应用

目标不是构建两套独立的体验。而是构建一个具有坚实 HTML 基础的体验,然后在其上叠加 JavaScript。

现代框架越来越支持这一点。Next.js、Remix 和 Astro 都提供服务端渲染,在任何客户端代码运行之前就能提供真实的 HTML。带有 action 和 method 属性的 HTML 表单在水合完成前就能正确提交。原生浏览器特性——用于手风琴的 <details>、用于模态框的 <dialog>、用于类选项卡模式的 CSS :target>——可以处理曾经完全需要 JavaScript 的交互。

模式如下:从有效的语义化 HTML 开始。然后将 JavaScript 作为改进添加。

<!-- 无 JS 也能工作:真实链接,键盘可访问 -->
<a href="/dashboard" id="nav-dashboard">仪表板</a>

<script>
  // 增强:仅在 JS 可用时拦截
  document.getElementById('nav-dashboard')
    ?.addEventListener('click', (e) => {
      e.preventDefault();
      router.push('/dashboard');
    });
</script>
<!-- 如果服务器处理端点,表单无 JS 也能工作 -->
<form action="/contact" method="post">
  <label for="message">消息</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">发送</button>
</form>

服务端验证在这里是不可协商的。永远不要仅依赖客户端验证。

结论

无 JavaScript 测试不是为了支持禁用它的用户。而是为了理解你自己的架构。如果禁用 JavaScript 会破坏整个网站,那么你构建的东西是脆弱的——而脆弱的东西会在生产环境中最糟糕的时刻失效。

HTML 优先的 Web 开发方法使你的应用程序更具弹性、更易访问且更易维护。JavaScript 应该改善一个可工作的体验,而不是成为体验存在的唯一原因。

常见问题

通过 Chrome DevTools 禁用 JavaScript 只会停止页面级脚本执行。已注册的 Service Worker 可能会继续提供缓存响应,浏览器扩展在其自己的上下文中运行。为了进行干净的测试,请使用禁用扩展的隐身窗口,同时配合 DevTools 的 JavaScript 开关。

是的,尽管方法因复杂性而异。Remix 和 Next.js 等框架通过服务端渲染路由并在客户端进行水合来处理繁重的工作。你可能无法在没有 JavaScript 的情况下复制每个交互功能,但导航、内容显示和表单提交等核心流程可以仅用 HTML 工作。

不能。禁用 JavaScript 会揭示结构性 HTML 问题,如缺失的链接或损坏的表单,但它不会测试屏幕阅读器行为、焦点管理、颜色对比度或 ARIA 属性使用。将其视为测试的一层,与使用 axe 或 Lighthouse 等工具进行的专门可访问性审计一起使用。

每当添加新页面、路由或关键用户流程时,都应运行无 JavaScript 检查。在 DevTools 中只需几秒钟,可以及早发现架构回归。将其集成到代码审查清单或 CI 流水线中,使用 Playwright 等工具(可以在测试配置中禁用 JavaScript),使流程保持一致。

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog