儲存console.log的特定資料

今天在處理圖檔資料時，一直發現無法取樣到pixel，使用console.log一個個log出來，pixel有兩三十萬筆，一個個print出來資料量太大沒用外，也造成瀏覽器整個delay，畢竟我的需求是想查看Array中資料是否有0以外的資料，我是否有取錯圖檔等，最後想到儲成file再用編輯器看是最快，不過遇到兩個問題

1. 陣列要一個個拿出來print再存？
2. js怎存檔？

第一個問題，可以直接用JSON處理。
第二個問題查了下，看到這篇 How to save the output of a console.log(object) to a file? 就解決了我這兩個需求。這邊做下記錄。

(function(console){

console.save = function(data, filename){

    if(!data) {
        console.error('Console.save: No data')
        return;
    }

    if(!filename) filename = 'console.json'

    if(typeof data === "object"){
        data = JSON.stringify(data, undefined, 4)
    }

    var blob = new Blob([data], {type: 'text/json'}),
        e    = document.createEvent('MouseEvents'),
        a    = document.createElement('a')

    a.download = filename
    a.href = window.URL.createObjectURL(blob)
    a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    a.dispatchEvent(e)
 }
})(console);

文中也提到，Chrome其實可以直接save，link: Right click > Save as in the Console panel to save the logged messages to a file.

參考資料
How to save the output of a console.log(object) to a file?
A collection of helpful snippets to use inside of browser devtools － console-save.js