JS `Chrome DevTools` `Overrides`：持久化修改源代码进行调试

各位靓仔靓女，早上好（或者下午/晚上好，取决于你们盯着屏幕的时间）。今天咱们来聊聊Chrome DevTools里一个超级实用，但又经常被忽略的功能：Overrides。这玩意儿，说白了，就是个“欺骗”浏览器的工具，能让你在不修改服务器代码的情况下，修改前端代码并进行调试，持久化你的修改。听起来是不是有点刺激？

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

想象一下，你正在调试一个线上网站的bug。这个bug只在特定情况下出现，而且你怀疑是某个JavaScript文件的问题。但是，你没有权限直接修改服务器上的代码，或者修改起来非常麻烦。这时候，Overrides就派上用场了。

Overrides允许你：

本地修改源代码： 你可以在Chrome DevTools里直接修改HTML、CSS、JavaScript等文件，这些修改会覆盖线上版本，但只在你本地生效。
持久化修改： 关闭浏览器、刷新页面后，你的修改仍然存在，不会丢失。
调试线上代码： 你可以像调试本地代码一样，设置断点、单步执行，查看变量值，等等。

简单来说，Overrides就是一个“本地调试器”，让你可以在不影响线上环境的情况下，模拟修改线上代码，快速定位和解决问题。

为啥要用它？

节省时间： 避免了频繁修改服务器代码、上传部署的麻烦。
安全可靠： 本地修改不会影响线上用户。
方便调试： 可以像调试本地代码一样，进行各种调试操作。
模拟各种情况： 可以修改HTML、CSS、JavaScript，模拟各种不同的用户环境。
测试第三方代码: 可以修改第三方库的代码，看看是否是第三方库造成的bug。

二、如何使用Overrides？手把手教你

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

打开Chrome DevTools： 按F12，或者右键选择“检查”。
切换到“Sources”面板： 在DevTools顶部找到“Sources”选项卡，点击进入。
启用Overrides： 在“Sources”面板左侧，找到“Overrides”选项卡（如果没有，点击三个点“…”更多工具，找到并选择）。
选择一个目录： 点击“+ Select folder for Overrides”，选择一个本地目录，用于存放你的修改。Chrome会提示你允许访问该目录，点击“允许”。
开始修改： 找到你想修改的文件，点击打开。你可以直接在DevTools里修改代码。
保存修改： 按Ctrl+S（或者Cmd+S），保存你的修改。

代码示例：

假设你的网站有一个名为app.js的JavaScript文件，其中有一段代码：

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

console.log(greet("World"));

你想把Hello改成Hi。

按照上面的步骤，启用Overrides，并选择一个本地目录。
在“Sources”面板中，找到app.js文件，点击打开。
将Hello改成Hi：

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

console.log(greet("World"));

按Ctrl+S保存修改。
刷新页面，你会发现控制台输出的是Hi, World!，而不是Hello, World!。

三、 Overrides的进阶用法：更上一层楼

Overrides不仅仅可以修改代码，还可以做更多的事情。

修改HTML： 你可以修改页面的结构、内容，模拟不同的用户体验。
修改CSS： 你可以修改页面的样式，调整布局、颜色，等等。
修改网络请求： 你可以拦截网络请求，修改请求参数、响应内容，模拟不同的服务器状态。

1. 修改HTML示例：

假设你的网页上有一个标题：

<h1>Hello, World!</h1>

你想把标题改成Hi, Everyone!。

启用Overrides，并选择一个本地目录。
在“Elements”面板中，找到<h1>标签，右键选择“Edit as HTML”。
将Hello, World!改成Hi, Everyone!：

<h1>Hi, Everyone!</h1>

点击页面空白处，保存修改。
你会发现页面上的标题已经变成了Hi, Everyone!。

2. 修改CSS示例：

假设你的网页上有一个按钮，样式如下：

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}

你想把背景颜色改成红色。

启用Overrides，并选择一个本地目录。
在“Sources”面板中，找到包含CSS代码的文件，或者在“Elements”面板中找到.button对应的CSS规则。
将background-color: blue;改成background-color: red;：

.button {
  background-color: red;
  color: white;
  padding: 10px 20px;
}

按Ctrl+S保存修改。
你会发现按钮的背景颜色已经变成了红色。

3. 修改网络请求示例：

这个功能比较高级，需要用到DevTools的“Network”面板。

假设你的网站会向一个API发送请求，获取用户数据：

fetch('/api/user')
  .then(response => response.json())
  .then(data => console.log(data));

你想修改API的响应内容，模拟不同的用户数据。

启用Overrides，并选择一个本地目录。
在“Network”面板中，找到/api/user这个请求，右键选择“Override content”。
DevTools会自动创建一个Overrides文件，用于存放你的修改。
在Overrides文件中，输入你想返回的JSON数据：

{
  "name": "Override User",
  "age": 99
}

保存修改。
刷新页面，你会发现控制台输出的是你修改后的JSON数据。

四、 Overrides的注意事项：别踩坑里了

Overrides虽然强大，但也有一些需要注意的地方：

只影响本地： 你的修改只在你本地生效，不会影响线上用户。
文件路径要对应： Overrides会根据文件路径来覆盖线上文件，所以你要确保文件路径是正确的。
缓存问题： 有时候，浏览器会缓存线上文件，导致Overrides不生效。你可以尝试清除浏览器缓存，或者强制刷新页面（Ctrl+Shift+R）。
版本控制： Overrides不会自动进行版本控制，所以你要自己记录你的修改。
不要滥用： Overrides主要用于调试，不要用它来修改线上代码，否则可能会导致不可预料的问题。
记住关闭： 调试完毕后，记得关闭Overrides，否则可能会影响你访问其他网站。

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

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

Console： 可以在Console中输出调试信息，查看变量值。
Sources： 可以在Sources中设置断点，单步执行代码。
Network： 可以查看网络请求，分析性能问题。
Performance： 可以分析页面性能，找出瓶颈。
Application： 可以查看Cookie、LocalStorage等数据。

六、常见问题解答：Q&A

Q：Overrides不起作用怎么办？
- A：检查Overrides是否启用，文件路径是否正确，浏览器缓存是否清除。
Q：Overrides文件保存在哪里？
- A：保存在你选择的本地目录中。
Q：如何关闭Overrides？
- A：在“Sources”面板中，取消勾选“Enable Local Overrides”。
Q：可以同时Override多个文件吗？
- A：可以的。
Q：Overrides会影响其他网站吗？
- A：理论上不会，但为了安全起见，调试完毕后最好关闭Overrides。

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

Overrides是一个非常实用的Chrome DevTools功能，它可以让你在不修改服务器代码的情况下，修改前端代码并进行调试，提高调试效率，快速定位和解决问题。

掌握了Overrides，你就拥有了一个强大的调试利器，可以更加自信地面对各种前端bug。

记住，熟能生巧，多加练习，你也能成为Overrides高手！

希望今天的讲座对大家有所帮助。如果大家有什么问题，欢迎随时提问。

下次见！

发表回复 取消回复

发表回复取消回复