Chromeで画面遷移してもconsole.logを残す方法

ウェブ開発を行う際に、console.logを使用してデバッグ情報を出力することは非常に一般的です。しかし、ウェブページが画面遷移（例：別のURLへ移動）する際には、コンソールの情報がリセットされてしまい、過去のログを参照できなくなります。こうした場合に、画面遷移をしてもconsole.logの情報を保持したいというニーズがあります。

そこで今回は、Chromeで画面遷移があってもconsole.logの情報を残すための方法をいくつかご紹介します。

1. Chrome DevToolsの「Preserve log」オプションを使う

Chromeには、画面遷移が発生してもコンソールログを保持できるオプションが用意されています。この機能を使用することで、画面遷移後もログが消えずに残り、デバッグに役立ちます。

手順

Chromeで対象のウェブページを開きます。
右クリックして「検証」を選択するか、F12キーを押してChrome DevToolsを開きます。
Consoleタブをクリックしてコンソール画面を表示します。
コンソール上部にある「Preserve log」または「ログを保持する」にチェックを入れます。

これで、ページがリロードや画面遷移をしても、過去のconsole.logの情報が残り続けます。

2. ローカルストレージやセッションストレージを使う

画面遷移が発生するたびにconsole.logの内容が消えてしまう場合、ローカルストレージやセッションストレージを活用することで、データを一時的に保存し続けることができます。これにより、画面遷移後に以前のデバッグ情報を取得可能です。

例：セッションストレージに保存

// console.logの内容をセッションストレージに保存
function saveLog(message) {
    let logs = sessionStorage.getItem('consoleLogs');
    logs = logs ? JSON.parse(logs) : [];
    logs.push(message);
    sessionStorage.setItem('consoleLogs', JSON.stringify(logs));
}

// console.logを拡張して保存機能を追加
const originalLog = console.log;
console.log = function(message) {
    saveLog(message);
    originalLog.apply(console, arguments);
};

// セッションストレージからログを復元
window.addEventListener('load', function() {
    const savedLogs = sessionStorage.getItem('consoleLogs');
    if (savedLogs) {
        JSON.parse(savedLogs).forEach(log => {
            originalLog(log);
        });
    }
});

上記のコードでは、console.logの内容をセッションストレージに保存し、ページがリロードされた際に再度コンソールに表示させています。ローカルストレージを使えば、ブラウザを閉じてもデータを保持することができますが、セッションの間のみログを保持したい場合はセッションストレージが便利です。

3. サーバーログを使用する

画面遷移が発生してもconsole.logの情報を確実に保存したい場合、サーバー側にログを送信して管理する方法も有効です。これにより、クライアントサイドのブラウザ状態に関係なく、ログ情報をサーバーで永続的に保持できます。

例：AJAXでログをサーバーに送信

function sendLogToServer(message) {
    fetch('/log', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ log: message }),
    });
}

const originalLog = console.log;
console.log = function(message) {
    sendLogToServer(message);
    originalLog.apply(console, arguments);
};

この方法では、console.logで出力された内容をサーバーに送信し、サーバー側でログを記録します。AJAXリクエストやWebSocketなどを使用することで、リアルタイムでログを送信することが可能です。これにより、ブラウザの状態に左右されることなく、すべてのログを保存できます。

4. ファイルとしてログを保存

もう一つの方法として、console.logの内容をファイルとして保存することもできます。これは、開発者が手動で必要な時にログを取得し、後で見返すのに役立ちます。

例：ファイルにログを保存

function downloadLog(logs) {
    const blob = new Blob([logs.join('\n')], { type: 'text/plain' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'logs.txt';
    link.click();
}

const logs = [];
const originalLog = console.log;
console.log = function(message) {
    logs.push(message);
    originalLog.apply(console, arguments);
};

// 任意のタイミングでログをダウンロード
document.getElementById('downloadLogsButton').addEventListener('click', function() {
    downloadLog(logs);
});

上記の例では、コンソールに表示されたログを保持して、ボタンが押されたときにテキストファイルとしてダウンロードします。このようにすれば、必要なタイミングでログを取得して後から解析することができます。

まとめ

Chromeで画面遷移が発生してもconsole.logの情報を残すための方法をいくつか紹介しました。「Preserve log」オプションを使用すれば簡単に対応できますが、さらに高度な方法として、ストレージやサーバーログ、ファイル保存などを活用する方法もあります。プロジェクトの規模や必要性に応じて、最適な方法を選択してください。

アルアカ - Arcadia Academia