Chrome DevTools Console 腳本頁面刷新後失效：根因與三種持久化方案

為什麼會失效？

DevTools Console 執行上下文**綁定當前頁面文檔**。提交表單觸發導航 (Navigation) → 舊文檔銷毀 → 新文檔建立 → Console 上下文重置 → 所有變數、函數、事件監聽器全部消失。

三種持久化方案

方案一：不要提交表單，直接呼叫 API (最簡單、推薦)

// 在 Console 執行
async function batchRegister(users) {
    for (const u of users) {
        const resp = await fetch('/api/register', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            credentials: 'include',  // 攜帶 Cookie
            body: JSON.stringify(u)
        });
        const data = await resp.json();
        console.log(u.username, data.success ? '✅' : '❌', data.msg);
        await new Promise(r => setTimeout(r, 500)); // 限流
    }
}

// 使用
batchRegister([
    {username: 'u1', email: 'u1@x.com', password: '123'},
    {username: 'u2', email: 'u2@x.com', password: '123'}
]);

方案二：Snippets 面板 - 程式碼持久化，但上下文仍會重置

1. DevTools → **Sources** 面板 → **Snippets** 分頁
2. 右鍵 → New → 命名為 autoRegister.js
3. 貼上程式碼，右鍵 → **Run**
4. 優點：程式碼保存在瀏覽器設定檔，重啟瀏覽器不丟失
5. 缺點：頁面刷新仍需手動再次 Run

方案三：Tampermonkey / 瀏覽器擴展 - 真正持久化 (生產級)

// ==UserScript==
// @name         Persistent Auto Register
// @match        https://target.com/register*
// @grant        GM_xmlhttpRequest
// @run-at       document-start
// ==/UserScript==

// 頁面每次載入自動執行，無需手動介入
(async function() {
    if (window.location.search.includes('auto=1')) {
        await doRegister();
    }
})();

核心模式對比

進階技巧：保持頁面不跳轉的同時觸發原有邏輯

// 覆寫 form.onsubmit，攔截並改用 fetch
const form = document.querySelector('form');
form.addEventListener('submit', async (e) => {
    e.preventDefault(); // 阻止預設提交導航
    const formData = new FormData(form);
    const resp = await fetch(form.action, {
        method: 'POST',
        body: formData,
        credentials: 'include'
    });
    const result = await resp.json();
    console.log('攔截提交結果:', result);
    // 這裡可決定是否手動跳轉：window.location.href = '/success';
});

總結

**Console 腳本無法跨頁面持久化是瀏覽器架構決定的**。要實現批量註冊等自動化，核心策略是：**攔截表單提交 → 改用 fetch/XHR 呼叫後端 API → 留在原頁繼續下一輪**。配合 Snippets 管理程式碼，或升級為 Tampermonkey/擴展獲得真正的自動化能力。