怎么將Chrome調試器里的JavaScript變量保存成本地JSON文件

這篇文章主要介紹“怎么將Chrome調試器里的JavaScript變量保存成本地JSON文件”，在日常操作中，相信很多人在怎么將Chrome調試器里的JavaScript變量保存成本地JSON文件問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么將Chrome調試器里的JavaScript變量保存成本地JSON文件”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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

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

如果我想將這個變量保存到本地，以備以后進一步分析，一種做法是用JSON.stringfy將其序列號成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開發者工具的console標簽頁執行，給標準的console對象新增一個save方法。這個方法有兩個輸入參數，第一個為待保存成本地JSON文件的JavaScript變量，第二個參數為本地JSON文件的名稱。

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

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

回車，Chrome自動彈出一個JSON文件保存窗口：

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

到此，關于“怎么將Chrome調試器里的JavaScript變量保存成本地JSON文件”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！