如何在Chrome中修改<script src>的URL并重新加载页面测试？

这种没法碰生产HTML、又没QA环境的调试场景，我平时踩过不少坑，给你几个亲测有效的方案，解决你之前遇到的「修改src后刷新就复原」的问题：

方法1：Chrome DevTools 本地覆盖（Local Overrides）——持久化替换最省心 #

这是我最常用的方案，能让浏览器一直加载你本地修改后的JS，不用每次刷新都重复操作：

• 打开Chrome DevTools（快捷键 Cmd+Opt+I（Mac）/ Ctrl+Shift+I（Windows）），切换到「Sources」面板
• 点击左侧的「Overrides」标签，选择「Select folder for overrides」，挑一个本地文件夹用来存修改后的JS，给浏览器授权访问该文件夹的权限
• 回到「Sources」→「Page」标签，顺着域名找到生产环境里要替换的目标JS文件
• 右键点击这个JS文件，选择「Save for overrides」，浏览器会自动把生产环境的JS复制到你选的本地文件夹
• 打开本地的这个JS文件，替换成你修改后的代码
• 现在不管怎么刷新页面，浏览器都会优先加载你本地的JS文件，完全不会再请求生产环境的原文件

方法2：动态替换Script标签——快速临时测试 #

如果只是临时测一次改动，不想搞持久化覆盖，可以用这个快速方案（不用刷新页面，避免DOM重置）：

• 打开DevTools的「Elements」面板，找到引用目标JS的<script>标签
• 要么直接修改它的src属性为你的测试JS地址（比如本地静态服务的http://localhost:3000/updated.js），要么删除原标签，新建一个<script src="你的测试JS地址"></script>插入到页面的<body>或<head>里
• 切换到「Console」面板，执行一段代码让新的JS生效：

  // 如果是修改了原标签的src，先移除再重新插入
  const oldScript = document.querySelector('script[src="你的测试JS地址"]');
  oldScript.remove();
  const newScript = document.createElement('script');
  newScript.src = '你的测试JS地址';
  document.body.appendChild(newScript);
  

• 这样页面会直接加载并执行你的测试JS，完全不用刷新，自然不会出现src复原的问题

方法3：DevTools Snippets——小改动快速验证 #

如果你的JS改动不大，只是要验证逻辑，甚至不用单独起服务，直接用Snippets执行修改后的代码：

• 打开DevTools的「Sources」面板，切换到「Snippets」标签
• 点击「New snippet」，粘贴你修改后的JS代码
• 右键点击这个snippet，选择「Run」，代码会直接在当前页面执行
• 这种方式相当于在原JS之后追加执行你的修改，适合测试逻辑片段（注意变量或方法的覆盖顺序）

为什么你之前的方法失败？ #

你之前修改src后普通刷新，浏览器会重新请求生产环境的HTML，页面的DOM会被完全重置，所以你手动修改的src自然就被打回原形了——核心是要避开「让浏览器重新加载原HTML重置DOM」这个坑，要么让浏览器加载本地替换的资源，要么不刷新页面直接动态替换脚本。

内容的提问来源于stack exchange，提问作者NutellaAddict