如何使用JavaScript切换页面且不重置浏览器控制台，并保持自定义代码跨页面运行？

你遇到的核心问题是：页面重定向会彻底销毁当前页面的JavaScript执行上下文，所以原本在控制台输入的自定义代码自然会中断——哪怕开启了「Preserve log」也只能保留之前的输出，没法让代码在新页面继续跑。下面给你几个实用的解决思路，按可靠性排序：

1. 使用用户脚本管理器（推荐） #

这是跨页面持续运行自定义代码最省心的方式，比如Tampermonkey（油猴）这类工具：

• 安装Tampermonkey后，点击扩展图标新建一个脚本
• 在脚本头部设置@match规则，匹配你需要处理的所有页面（比如目标网站的所有URL）：

  // ==UserScript==
  // @name         跨页面元素抓取脚本
  // @namespace    http://tampermonkey.net/
  // @version      0.1
  // @description  在指定页面自动抓取元素
  // @match        https://www.example.com/*
  // @match        https://your-other-target-page.com/*
  // @grant        none
  // ==/UserScript==
  

• 然后在脚本主体里写你的逻辑，比如页面加载完成后抓取元素：

  (function() {
      'use strict';
  
      window.addEventListener('load', () => {
          // 这里写你的元素获取逻辑
          const targetElements = document.querySelectorAll('.your-target-selector');
          console.log('抓取到的元素:', targetElements);
          
          // 如果需要跳转到下一页并继续抓取，可以在这里处理跳转逻辑
          // 比如延迟跳转，确保当前元素处理完成
          setTimeout(() => {
              location.href = 'https://www.example.com/next-page';
          }, 2000);
      });
  })();
  

• 保存脚本后，只要你打开匹配的页面，脚本就会自动运行，完全不受页面跳转的影响，控制台也会持续输出每个页面的结果。

2. 结合LocalStorage传递状态 + 控制台代码片段 #

如果你不想装扩展，可以用浏览器的LocalStorage传递任务状态，配合DevTools的代码片段（Snippets）自动执行：

步骤1：在原页面设置任务状态 #

在控制台输入以下代码，存储你要执行的任务，然后跳转：

// 存储任务信息，包括目标页面和要执行的操作
localStorage.setItem('crossPageTask', JSON.stringify({
  task: 'fetchElements',
  selector: '.target-element',
  nextPage: 'https://www.example.com/next-page'
}));

// 跳转到目标页面
location.href = 'https://www.example.com/next-page';

步骤2：创建代码片段自动执行任务 #

• 打开Chrome DevTools的「Sources」面板，切换到「Snippets」标签
• 新建一个片段，比如命名为CrossPageFetcher.js，粘贴以下代码：

  window.addEventListener('DOMContentLoaded', () => {
      const task = JSON.parse(localStorage.getItem('crossPageTask'));
      if (!task) return;
  
      // 检查当前页面是否是任务目标页面
      if (window.location.href.includes(task.nextPage)) {
          // 执行元素抓取
          const elements = document.querySelectorAll(task.selector);
          console.log('当前页面元素:', elements);
  
          // 如果有后续页面，可以在这里更新任务并跳转
          // 比如：
          // task.nextPage = 'https://www.example.com/third-page';
          // localStorage.setItem('crossPageTask', JSON.stringify(task));
          // location.href = task.nextPage;
  
          // 任务完成后清除状态（可选）
          // localStorage.removeItem('crossPageTask');
      }
  });
  

• 右键点击片段选择「Run」，之后每次页面加载时，这个片段都会自动检查LocalStorage里的任务并执行。你也可以给片段设置快捷键，或者结合「Preserve log」保留所有输出。

3. DevTools的「Overrides」功能（进阶） #

如果你需要长期在特定页面注入代码，可以用DevTools的Overrides功能：

• 打开DevTools的「Sources」面板，切换到「Overrides」标签
• 选择一个本地文件夹存放覆盖文件，允许浏览器访问
• 右键点击目标页面的HTML文件，选择「Save for overrides」
• 编辑本地的HTML文件，在<head>里添加你的自定义脚本，这样每次加载该页面时，浏览器都会加载你修改后的版本，自动执行你的代码。

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