蒜皮小技 - 瀏覽器 F12 開發者工具轉存物件到 JSON 檔

這篇是寫給自己的筆記，不值錢但還挺常用到的小技巧，但我每次用每次查，記性廢到自己想笑 (現在寫程式也靠 AI，只怕將來會更廢)。索性寫篇文章留在自己的部落格，至少以後不必到處問四處找。

程式除錯或是要從網站擷取資料，我常用的一個做法是開瀏覽器 F12 開發者工具，檢查 DOM 結構，即興寫幾行 JavaScript 將需要的資料整理拼湊成 Dictionary 或物件陣列，存成 JSON，或是整理成 CSV，方便後續分析或處理。

舉個最近用到的例子：我想整理某個 YouTuber 所有影片的清單，用 F12 觀察 DOM 結構，寫一行 JavaScript，包含標題跟網址的資料陣列就到手囉。

[...document.querySelectorAll('.ytd-two-column-browse-results-renderer #video-title-link')]
    .map(a => ({ t: a.textContent, u:a.href }))

這番即興操作的最後一哩路，是將結果轉存成檔案，用來存檔備查、轉寄分享或以其他軟體或程式後製。之前我常用的做法是將物件轉成 JSON 存入字串變數，再用瀏覽器偵錯工具的變數右鍵選單複製到剪貼簿。

這招遇上大資料會變得笨拙，尤其得開個空白 Notepad 貼上才能存檔，感覺有點 Low。其實，用幾行 JavaScript 程式便能將字串或物件存成檔案，不需要繞這麼遠。

依據過去的使用經驗，大宗應用屬 JSON 或 CSV/TXT 這兩種，我將這個匯出功能寫成通用函式，呼叫時傳入物件或字串後下載存檔。若傳入的是物件，程式會先用 JSON.stringify() 轉換成 JSON 字串，檔名可指定或用日期時間自動產生，再配上 .json 或 .txt 副檔名。

function _exportObject(obj, filename) {
    let data = obj;
    let type = 'text/plain';
    let ext = '.txt';
    if (typeof obj !== 'string') {
        data = JSON.stringify(obj, null, 2);
        type = 'application/json';
        ext = '.json';
    }
    const blob = new Blob([data], { type: type });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    filename = filename || `export-${new Date().toLocaleString('sv').replace(/[-:]/g, '')}`;
    if (!filename.match(/\.[^.]+$/)) {
        filename += ext;
    }
    a.download = filename;
    a.click();
    URL.revokeObjectURL(url);
}

使用方法很簡單，將上述函式貼到 F12 主控台，把物件或字串準備好，呼叫 _exportObject() 傳入物件存 .json、傳入 CSV 字串存 .csv，輕鬆搞定。

(希望我記得關鍵字找得到這篇，噗!)

A note on using JavaScript to export data from web pages. It includes a function to save objects or strings as JSON or CSV files directly from the browser, simplifying data extraction and storage.