我們在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 = 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開發者工具的console標簽頁執行，給標準的console對象新增一個save方法。這個方法有兩個輸入參數，第一個為待保存成本地JSON文件的JavaScript變量，第二個參數為本地JSON文件的名稱。

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

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

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

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

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

(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文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。