在开始这一章之前，我想先问你一个问题：你的页面在没有 JavaScript 的情况下，还“能看”吗？
对很多前端开发者来说，这个问题可能从来没想过。毕竟现在的前端项目，离开 JavaScript 几乎寸步难行——React、Vue、各种动画库、异步请求……似乎每一行代码都离不开 JS。
但事实是：不是每个用户都能正常执行 JavaScript。
有些用户使用老旧的浏览器，有些用户所在的企业网络会屏蔽某些脚本，有些用户会主动在浏览器设置里禁用 JS 来提升安全性和加载速度。更常见的情况是——你的 JS 文件加载失败了，CDN 挂了，或者代码里有一个语法错误导致后续所有脚本都无法执行。
在这些情况下，用户看到的页面是什么样子？是一个完整的、可读的页面，还是一团乱麻？
禁用 JavaScript 进行测试，就是帮你回答这个问题。
这是一个非常简单的操作——打开 DevTools，在命令菜单里输入几个字母，按回车——但它能帮你发现很多“页面依赖 JS 过深”的问题。这一章我们就来学学怎么快速禁用和重新启用 JavaScript，以及这个功能在什么场景下最有用。
小提示：这一章的内容很短，但价值很大。看完之后，建议你立刻去自己的项目里试一下——看看禁用 JS 之后页面变成了什么样。
一、为什么要禁用 JavaScript？
在学怎么操作之前，先来说说为什么要这么做。
1. 测试页面的“渐进增强”
渐进增强（Progressive Enhancement）是 Web 开发中的一个重要原则：先确保核心内容和基本功能对所有人可用，再在上面叠加增强功能。
换句话说，你的页面应该在没有任何 JavaScript 的情况下也能正常展示核心内容——文字可读、图片可见、链接可点。JS 是用来“增强”体验的，而不是用来“支撑”体验的。
禁用 JS 测试，就是检查你的页面是否做到了这一点。
2. 排查 JS 相关的加载问题
有时候，页面加载出了问题——白屏、卡住、部分内容不显示。你不确定是 JS 报错导致的，还是 CSS 加载失败、或者后端接口挂了。
这时候禁用 JS 可以帮你做“排除法”：如果禁用 JS 之后页面能正常显示了，说明问题出在 JS 上；如果禁用之后仍然有问题，那就要去查其他原因了。
3. 检查 SEO 友好性
搜索引擎的爬虫虽然现在也能执行一部分 JavaScript，但最可靠的还是直接读取 HTML 中的内容。如果你的页面完全依赖 JS 渲染内容（比如用 React 的 client-side rendering），在 SEO 方面可能会有风险。禁用 JS 测试可以帮你模拟搜索引擎最基本的情况。
4. 排查“只有特定用户才遇到的 bug”
有些 bug 只在特定环境下出现——比如用户的浏览器禁用了 JS、或者某个第三方脚本加载失败了。在本地复现这些 bug 往往很困难，禁用 JS 能帮你模拟其中一部分场景。
小建议：不用每次都专门去测禁用 JS 的场景——但建议你在项目上线前、或者在做技术方案设计时，至少跑一次禁用 JS 的测试。花几分钟检查一下，能避免很多“低级但致命”的问题。
二、如何禁用 JavaScript？
禁用 JavaScript 最快捷的方式，是通过 DevTools 的命令菜单来实现。
方法一：通过命令菜单（推荐）
前面第五章我们详细学过命令菜单，现在是时候用上了。
操作步骤：
打开 Chrome DevTools（按 F12 或 Ctrl/Cmd + Shift + I）
打开命令菜单：
Windows / Linux：按 Ctrl + Shift + P。
Mac：按 Command + Shift + P。
在命令菜单的输入框中，开始输入 javascript。
在下拉列表中，选择 Disable JavaScript（停用 JavaScript）。
按回车执行。
就这么简单。执行之后，当前标签页的 JavaScript 会立即被禁用。
注意： 命令菜单支持模糊搜索，你不需要完整输入 Disable JavaScript。输入 dis 或者 javascript，它就会出现在选项里。
方法二：通过设置面板
如果你更喜欢用鼠标操作，也可以通过设置面板来禁用 JavaScript：
打开 DevTools。
点击右上角的齿轮图标 ⚙️ 打开 Settings（设置）。
在左侧菜单中找到 Debugger（调试器） 部分（不同版本的 Chrome 位置可能略有不同）。
勾选 Disable JavaScript 选项。
不过，这个方法相比命令菜单要慢不少。在日常开发中，命令菜单是更高效的选择。
方法三：通过 Chrome 浏览器设置（全局禁用）
如果你需要全局禁用所有网站的 JavaScript（而不仅仅是当前调试的页面），可以在 Chrome 的浏览器设置中操作：
在地址栏输入 chrome://settings/content/javascript 后，回车。
关闭 允许网站使用 JavaScript 的开关。
但这个方法会影响到所有网站，一般不推荐用于日常调试。大部分情况下，用 DevTools 的临时禁用就足够了。
三、如何知道 JavaScript 已被禁用？
禁用 JavaScript 之后，Chrome 会给你几个明确的提示：
地址栏图标：Chrome 地址栏的右侧会出现一个对应的禁用图标（一个带斜杠的 JS 标志）。
DevTools 警告：在 DevTools 的 Sources（源代码） 面板标签旁边，会出现一个黄色的警告图标 ⚠️。
这两个提示能让你快速确认——当前的 JavaScript 确实已经被禁用了，避免你在调试时产生困惑。
四、如何重新启用 JavaScript？
禁用之后，你肯定需要重新打开。有两种方式：
方法一：通过命令菜单
和禁用的操作完全一样：
打开命令菜单（Ctrl/Cmd + Shift + P）。
输入 javascript。
选择 Enable JavaScript（启用 JavaScript）。
按回车执行。
方法二：关闭 DevTools
如果你直接关闭 DevTools，JavaScript 会自动重新启用。
不过需要注意的是，关闭 DevTools 之后，页面上原本的 JS 状态不会自动恢复——你需要手动刷新页面，让所有脚本重新加载和执行。
小建议：如果你只是想临时看一眼禁用 JS 的效果，看完之后直接关掉 DevTools 再刷新页面，是最快的恢复方式。
五、实际应用场景
场景一：检查页面的“无 JS 备选方案”
假设你正在开发一个电商网站的详情页。商品标题、价格、描述这些核心信息应该直接在 HTML 中渲染，而不是完全依赖 JS 加载。
禁用 JS 之后刷新页面——如果页面是一片空白，说明你的页面“过于依赖 JS”了。这时候就需要调整架构，让核心内容在服务端渲染，JS 只负责“增强”功能（比如加入购物车的交互）。
场景二：排查“白屏”问题
你的页面突然白屏了。你不确定是 JS 报错导致渲染失败，还是 CSS 加载出了问题。
禁用 JS 之后刷新——如果页面能显示出内容（哪怕样式不太对），说明问题出在 JS 上；如果仍然是白屏，那就要去检查 CSS 或者 HTML 本身了。
场景三：测试第三方脚本的影响
你的页面嵌入了多个第三方脚本（统计、广告、客服聊天等）。有时候某个第三方脚本加载失败，会导致整个页面卡住。
禁用 JS 之后，如果页面恢复了正常，说明问题出在某个第三方脚本上。这时候你就可以逐个排查，找出是哪个脚本在“拖后腿”。
六、常见问题
Q1：禁用 JS 之后，控制台还能执行 JavaScript 吗？
不管使用 chrome://settings/content/javascript 或 命令菜单方式停用 JavaScript， 控制台都不受影响。
Q2：禁用 JS 会影响 DevTools 本身吗？
不会。DevTools 本身是独立于页面运行的，禁用页面 JavaScript 不会影响 DevTools 的正常使用。
Q3：禁用 JS 之后，页面上的内联 <script> 和外链 JS 都会被禁用吗？
是的。无论是内联脚本（写在 HTML 里的 <script> 标签）还是外部脚本（通过 src 引用的 JS 文件），都会被完全禁用。
Q4：禁用 JS 是永久性的吗？
不是。它只影响当前 DevTools 所关联的标签页，而且只在这个 DevTools 实例开启期间有效。关闭标签页或者关闭 DevTools 之后，再打开新页面，JS 默认是启用的。
总结
在这一章中，我们学习了如何在 DevTools 中禁用和重新启用 JavaScript：
为什么要禁用 JS：测试渐进增强、排查加载问题、检查 SEO 友好性。
怎么禁用：通过命令菜单（Ctrl/Cmd + Shift + P → 输入 javascript → 选择 Disable JavaScript）。
怎么知道 JS 已禁用：地址栏图标 + DevTools 的 Sources 面板警告图标。
怎么重新启用：命令菜单执行 Enable JavaScript，或者关闭 DevTools。
禁用 JavaScript 进行测试，是一个“低成本、高回报”的习惯。它花不了你几秒钟，但能帮你发现很多潜在的可用性问题。从今天开始，在你完成一个页面的核心功能后，花 30 秒禁用 JS 刷新一下——看看你的页面在没有 JavaScript 的世界里，是否依然体面。
下一章预告：我们将系统学习 DevTools 的键盘快捷键——从最常用的到最冷门的，帮你把操作速度再提升一个档次。
本章练习
打开你最近正在开发的一个页面，用命令菜单禁用 JavaScript，然后刷新页面——看看页面变成了什么样子。核心内容还在吗？
观察禁用 JS 之后，Chrome 地址栏和 DevTools 的 Sources 面板分别出现了什么提示？
在禁用 JS 的状态下，打开控制台输入 console.log('test')——会发生什么？
用命令菜单重新启用 JavaScript，然后刷新页面——页面恢复了吗？
找一个你喜欢的知名网站（比如 GitHub），禁用 JS 之后刷新页面，观察它们的“无 JS 备选方案”是怎么做的——你能从中学到什么？
