Chrome DevTools Overrides 功能：如何持久化修改网页资源，进行本地调试和原型开发？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众，早上好！我是今天的主讲人，很高兴能和大家聊聊 Chrome DevTools 的 Overrides 功能。这玩意儿，说白了，就是个“乾坤大挪移”，能让你在不修改服务器文件的情况下，偷偷摸摸地修改网页资源，进行本地调试和原型开发。是不是听起来就很有意思？

那咱们就废话不多说，直接开始今天的“Overrides 乾坤大挪移”讲座！

一、Overrides 是个啥？为啥要用它？

Overrides，顾名思义，就是“覆盖”。它是 Chrome DevTools 里的一个功能，允许你覆盖（override）从服务器加载的网页资源，比如 HTML、CSS、JavaScript、图片等等。

为啥要用它呢？

想象一下，你正在开发一个网页，发现 CSS 样式有点问题，想改改看效果。

传统方式： 你得找到服务器上的 CSS 文件，修改，保存，上传，刷新页面，才能看到效果。要是改错了，还得撤销，重新上传。是不是很麻烦？
Overrides 方式： 直接在 DevTools 里修改 CSS，保存，刷新页面，就能看到效果。改错了，直接在 DevTools 里撤销，重新修改。是不是方便多了？

总结一下，Overrides 的优点：

方便快捷： 实时修改，实时查看效果，无需修改服务器文件。
安全可靠： 修改只在本地生效，不会影响服务器上的文件，不用担心改崩了线上环境。
版本控制： 可以使用 Git 等版本控制工具管理 Overrides 的修改，方便回溯和协作。

二、Overrides 怎么用？手把手教你“乾坤大挪移”

Overrides 的使用非常简单，只需要几个步骤：

打开 DevTools: 在 Chrome 浏览器中，按下 F12 键或者右键点击页面，选择“检查”打开 DevTools。
找到 Overrides 面板: 在 DevTools 中，点击 “Sources” 选项卡，然后在左侧导航栏中找到 “Overrides” 选项卡。如果没有，可以在 “More tools” 中找到并打开。
设置 Overrides 目录: 点击 “Select folder for Overrides” 按钮，选择一个本地文件夹作为 Overrides 目录。这个目录将用于存储你修改过的文件。Chrome 会提示你授权访问该文件夹。
开始 Overrides: 找到你想要修改的资源文件。比如，在 "Sources" -> "Page" 选项卡中找到对应的 HTML, CSS, JS 文件。
修改文件: 在 DevTools 中直接修改文件内容。
保存修改: 按下 Ctrl + S (Windows) 或 Cmd + S (Mac) 保存修改。
刷新页面: 刷新页面，查看修改后的效果。

一个简单的例子：修改网页的标题

打开一个网页，比如 https://www.example.com。
打开 DevTools，找到 “Sources” -> “Page” 选项卡，找到 HTML 文件。
设置 Overrides 目录。
在 HTML 文件中，找到 <title> 标签，修改标题内容，比如改成 <title>我的自定义标题</title>。
保存修改，刷新页面，你会发现网页的标题变成了你修改后的内容。

代码示例：

假设 HTML 文件内容如下：

<!DOCTYPE html>
<html>
<head>
    <title>原始标题</title>
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

使用 Overrides 修改后的 HTML 文件内容：

<!DOCTYPE html>
<html>
<head>
    <title>我的自定义标题</title>
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

三、Overrides 的高级用法：玩转“乾坤大挪移”

除了修改简单的 HTML 文件，Overrides 还可以做更多的事情。

修改 CSS 样式: 找到对应的 CSS 文件，修改样式，实时查看效果。

代码示例：

假设 CSS 文件内容如下：
```
body {
    background-color: white;
    color: black;
}
```
使用 Overrides 修改后的 CSS 文件内容：
```
body {
    background-color: lightblue;
    color: darkred;
}
```
修改 JavaScript 代码: 找到对应的 JavaScript 文件，修改代码，调试程序。

代码示例：

假设 JavaScript 文件内容如下：
```
console.log("Hello, world!");
```
使用 Overrides 修改后的 JavaScript 文件内容：
```
console.log("Hello, Overrides!");
```
替换图片: 替换网页上的图片，测试不同的设计方案。
- 找到对应的图片资源（在 Network 选项卡里可以查看资源URL）。
- 在 Overrides 目录中创建一个和线上资源路径相同的目录结构。
- 将你要替换的图片放到对应的目录位置。
- 刷新页面，你会发现图片已经被替换成你本地的图片了。
举例：

假设网页上有一张图片 https://www.example.com/images/logo.png。你的 Overrides 目录是 /Users/yourname/overrides。

那么你需要创建一个目录 /Users/yourname/overrides/images，然后把你要替换的图片命名为 logo.png，放到这个目录里。
模拟不同的设备: 结合 DevTools 的 Device Mode，可以模拟不同的设备，然后使用 Overrides 修改资源，调试在不同设备上的显示效果。
模拟不同的网络环境: 结合 DevTools 的 Network Throttling，可以模拟不同的网络环境，然后使用 Overrides 修改资源，测试在不同网络环境下的加载速度和用户体验。

四、Overrides 的注意事项：别走火入魔了！

虽然 Overrides 功能强大，但也要注意以下几点：

只用于本地调试： Overrides 的修改只在本地生效，不会影响服务器上的文件。所以，不要把 Overrides 当成正式的修改方式。
及时同步修改： 在本地调试完成后，一定要把修改同步到服务器上，否则其他用户看不到你的修改。
避免过度修改： Overrides 只是一个调试工具，不要过度依赖它。在正式开发中，还是要遵循正常的开发流程。
注意目录结构： Overrides 目录的结构要和服务器上的目录结构保持一致，否则可能无法正确覆盖资源。例如，如果你的网站的CSS文件在 https://example.com/css/style.css，那么你的本地 overrides 目录应该有 css 子目录，并且 style.css 文件应该放在这个子目录里。
清理 Overrides: 当你不再需要 Overrides 时，可以禁用它或者清空 Overrides 目录，避免影响正常的网页加载。

五、Overrides 与其他调试工具的配合：如虎添翼

Overrides 可以和其他调试工具配合使用，提高调试效率。

Console: 使用 console.log() 在 JavaScript 代码中输出调试信息，然后在 Console 面板中查看。
Debugger: 使用 Debugger 功能设置断点，单步调试 JavaScript 代码，查看变量的值。
Network: 使用 Network 面板查看网络请求，分析网页加载速度，查找性能瓶颈。
Performance: 使用 Performance 面板分析网页性能，找出需要优化的代码。
Lighthouse: 使用 Lighthouse 分析网页的 SEO、性能、可访问性等方面的问题，并提供优化建议。

六、一个更复杂的例子：修改第三方库

有时候，我们可能需要修改第三方库的代码，但又不想直接修改 node_modules 里的文件。这时候，Overrides 就可以派上用场了。

假设我们使用了一个名为 my-library.js 的第三方库，它的代码如下：

function greet(name) {
  return "Hello, " + name + "!";
}

我们想修改这个函数，让它返回不同的问候语。

在 DevTools 中找到 my-library.js 文件（通常在 "Sources" -> "Page" 或者 "Sources" -> "Content scripts" 中）。
设置 Overrides 目录。

修改 my-library.js 文件：

function greet(name) {
  return "Greetings, " + name + "!";
}

保存修改，刷新页面。

现在，当你调用 greet() 函数时，它将返回 "Greetings, xxx!" 而不是 "Hello, xxx!"。

表格总结 Overrides 的使用场景：

使用场景	描述
修改 CSS 样式	快速调整网页的样式，实时查看效果，无需修改服务器文件。
修改 JavaScript 代码	调试 JavaScript 代码，测试不同的逻辑，无需修改服务器文件。
替换图片	替换网页上的图片，测试不同的设计方案，无需修改服务器文件。
模拟不同的设备和网络环境	结合 DevTools 的 Device Mode 和 Network Throttling，模拟不同的设备和网络环境，然后使用 Overrides 修改资源，调试在不同设备和网络环境下的显示效果和加载速度。
修改第三方库代码	修改第三方库的代码，测试不同的功能，无需修改 `node_modules` 里的文件。
本地原型开发	在没有后端支持的情况下，修改 HTML、CSS、JavaScript 等资源，快速搭建网页原型。
测试 A/B 测试变体	模拟不同的 A/B 测试变体，无需服务器端配置。例如，可以修改按钮颜色、文本内容等，看看哪个变体效果更好。
调试线上问题 (小心使用)	在不影响用户体验的情况下，临时修改线上资源，定位问题。请务必谨慎使用，并确保只在本地生效，不要影响到其他用户。

七、一些常见的坑和解决方案：避坑指南

Overrides 不生效？
- 确保 Overrides 目录设置正确。
- 确保 Overrides 已经启用（Overrides 面板左上角有一个开关）。
- 确保 Overrides 目录的结构和服务器上的目录结构一致。
- 清除浏览器缓存，重新加载页面。
- 检查是否使用了 Service Worker，Service Worker 可能会缓存资源，导致 Overrides 不生效。
- 检查是否有其他 DevTools 扩展干扰了 Overrides 功能。
修改后的文件无法保存？
- 确保你有 Overrides 目录的写入权限。
- 检查磁盘空间是否已满。
修改后的代码出现语法错误？
- DevTools 会在代码中显示语法错误，仔细检查代码。
- 使用代码格式化工具格式化代码，避免出现隐藏的错误。
如何禁用 Overrides？
- 在 Overrides 面板中关闭 Overrides 开关。
- 清空 Overrides 目录。
- 禁用所有 DevTools 扩展，然后逐个启用，找出是否有扩展干扰了 Overrides 功能。
如何管理 Overrides 的修改？
- 使用 Git 等版本控制工具管理 Overrides 的修改，方便回溯和协作。
- 为不同的项目创建不同的 Overrides 目录，避免混淆。

八、总结：Overrides，你的调试利器

Overrides 是 Chrome DevTools 里一个非常实用的功能，可以让你在不修改服务器文件的情况下，修改网页资源，进行本地调试和原型开发。掌握了 Overrides，你就可以像孙悟空一样，自由地修改网页，快速地调试代码，高效地完成开发任务。

记住，Overrides 只是一个工具，要合理使用，不要过度依赖。在正式开发中，还是要遵循正常的开发流程，保证代码的质量和可维护性。

今天的“Overrides 乾坤大挪移”讲座就到这里，希望对大家有所帮助。谢谢大家！

发表回复 取消回复

发表回复取消回复