浏览器DevTools的Javascript Snippet页面跳转后不执行如何解决

页面跳转或刷新时，浏览器会销毁当前页面的全部JS执行上下文，你在原页面定义的定时器、变量、Snippet注入的所有代码都会被完全清除，因此跳转后后续逻辑自然无法执行。你单独在控制台运行对应代码正常，是因为你是在跳转后的新页面上下文中执行的。

方案1：手动触发式多步骤Snippet（适合临时快速测试） #

前置操作 #

打开DevTools控制台设置，勾选「Preserve log（保留日志）」，避免页面跳转后存储的步骤状态丢失。

可直接运行的Snippet代码 #

(function() {
  // 读取当前执行步骤，默认初始步骤为0
  const currentStep = Number(localStorage.getItem('autoTestStep')) || 0;

  // 工具函数：等待指定元素加载完成，避免写死超时时间
  function waitForElement(selector, timeout = 10000) {
    return new Promise((resolve, reject) => {
      const checkInterval = setInterval(() => {
        const targetEl = document.querySelector(selector);
        if (targetEl) {
          clearInterval(checkInterval);
          resolve(targetEl);
        }
      }, 100);
      setTimeout(() => {
        clearInterval(checkInterval);
        reject(new Error(`元素 ${selector} 超时未找到`));
      }, timeout);
    });
  }

  switch(currentStep) {
    // 第一步：初始页面点击跳转链接
    case 0:
      document.querySelector("#main-content > p:nth-child(6) > a").click();
      // 更新步骤标识，存储到localStorage
      localStorage.setItem('autoTestStep', 1);
      console.log('第一步执行完成：已触发跳转，页面加载完成后再次运行本Snippet即可执行后续逻辑');
      break;
    // 第二步：登录页填充用户名
    case 1:
      waitForElement("form input[formcontrolname='benutzername']")
        .then(inputEl => inputEl.value = 'xxxx')
        .then(() => {
          // 流程执行完成，清空步骤标识
          localStorage.removeItem('autoTestStep');
          console.log('第二步执行完成：已填充用户名，测试流程结束');
          // 如果还有后续步骤，可继续累加步骤数，不清空标识即可
        });
      break;
  }
})();

使用方式 #

1. 在初始页面运行一次Snippet，自动触发跳转
2. 等待新页面加载完成后，再次运行同一个Snippet，会自动执行第二步填充用户名的逻辑
3. 如果有更多页面跳转的步骤，只需要在switch中新增对应case即可。

方案2：全自动跨页执行（无需重复运行Snippet） #

如果需要完全自动化不用手动触发运行，可以使用DevTools的Local Overrides功能：

• 打开DevTools的Sources面板，切换到Overrides标签，选择一个本地空文件夹，勾选「Enable Local Overrides」并授予权限
• 新建一个JS覆盖文件，将上述Snippet代码中的逻辑加上页面加载监听：

document.addEventListener('DOMContentLoaded', () => {
  // 把上面Snippet里的所有逻辑复制到这里即可
})

• 保存后刷新页面，每次页面加载完成都会自动执行对应步骤的逻辑，无需手动运行Snippet。

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