我們在Chrome開發(fā)者工具的Console標(biāo)簽頁里，可以輸入JavaScript變量然后回車，查看這些變量的值。

比如我用類jQuery選擇器的語法 var button = $(‘button’)來返回當(dāng)前頁面所有button標(biāo)簽的實(shí)例。

如果我想將這個(gè)變量保存到本地，以備以后進(jìn)一步分析，一種做法是用JSON.stringfy將其序列號(hào)成JSON字符串，然后再手動(dòng)選中該字符串，新建一個(gè)本地文件，復(fù)制進(jìn)去并保存。

這套辦法可行但是太麻煩了。現(xiàn)在我向大家分享一種自動(dòng)化的做法。

(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 = filenamea.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開發(fā)者工具的console標(biāo)簽頁執(zhí)行，給標(biāo)準(zhǔn)的console對象新增一個(gè)save方法。這個(gè)方法有兩個(gè)輸入?yún)?shù)，第一個(gè)為待保存成本地JSON文件的JavaScript變量，第二個(gè)參數(shù)為本地JSON文件的名稱。

還是回到上面的例子，我在Chrome開發(fā)者工具的console頁面執(zhí)行了上述的JavaScript代碼后，緊接著再執(zhí)行下面的語句：

console.save(button, “button.json”);

回車，Chrome自動(dòng)彈出一個(gè)JSON文件保存窗口：

保存到本地即可。這種方式省去了手動(dòng)將JavaScript變量序列化成JSON string再手動(dòng)保存成本地文件的工作量，提升了程序員的工作效率。

要獲取更多Jerry的原創(chuàng)技術(shù)文章，請關(guān)注公眾號(hào)"汪子熙"或者掃描下面二維碼:

(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);

總結(jié)

以上是生活随笔為你收集整理的将Chrome调试器里的JavaScript变量保存成本地JSON文件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。