將Chrome偵錯程式裡的JavaScript變數儲存成本地JSON檔案

注销發表於2018-10-26
ChromeJavaScript變數JSON

我寫了一個系列的文章，主要用來蒐集一些供程式設計師使用的小工具，小技巧，幫助大家提高工作效率。

我們在Chrome開發者工具的Console標籤頁裡，可以輸入JavaScript變數然後回車，檢視這些變數的值。

比如我用類jQuery選擇器的語法 var button = $('button')來返回當前頁面所有button標籤的例項。

將Chrome偵錯程式裡的JavaScript變數儲存成本地JSON檔案

如果我想將這個變數儲存到本地，以備以後進一步分析，一種做法是用JSON.stringfy將其序列號成JSON字串，然後再手動選中該字串，新建一個本地檔案，複製進去並儲存。

將Chrome偵錯程式裡的JavaScript變數儲存成本地JSON檔案

這套辦法可行但是太麻煩了。現在我向大家分享一種自動化的做法。

(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偵錯程式裡的JavaScript變數儲存成本地JSON檔案

把這段程式碼貼上到Chrome開發者工具的console標籤頁執行，給標準的console物件新增一個save方法。這個方法有兩個輸入引數，第一個為待儲存成本地JSON檔案的JavaScript變數，第二個引數為本地JSON檔案的名稱。

還是回到上面的例子，我在Chrome開發者工具的console頁面執行了上述的JavaScript程式碼後，緊接著再執行下面的語句：

console.save(button, "button.json");

將Chrome偵錯程式裡的JavaScript變數儲存成本地JSON檔案

回車，Chrome自動彈出一個JSON檔案儲存視窗：

將Chrome偵錯程式裡的JavaScript變數儲存成本地JSON檔案

儲存到本地即可。這種方式省去了手動將JavaScript變數序列化成JSON string再手動儲存成本地檔案的工作量，提升了程式設計師的工作效率。

要獲取更多Jerry的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:


將Chrome偵錯程式裡的JavaScript變數儲存成本地JSON檔案

將Chrome偵錯程式裡的JavaScript變數儲存成本地JSON檔案


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2213928/，如需轉載，請註明出處，否則將追究法律責任。

相關文章