我寫了一個系列的文章，主要用來搜集一些供程式員使用的小工具，小技巧，幫助大家提高工作效率。
- 推薦一個功能強大的檔案搜尋工具SearchMyFiles
- 介紹一個好用的免費流程圖和UML繪制軟體-Diagram Designer
- 介紹Windows任務管理器的替代者-Process Explorer
- 介紹一個強大的磁盤空間檢測工具Space Sniffer
- 如何在電腦上比較兩個相似檔案的差異
- 程式員工作效率提升系列-推薦一個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再手動儲存成本地檔案的工作量，提升了程式員的工作效率。
要擷取更多Jerry的原創技術文章，請關注公衆号"汪子熙"或者掃描下面二維碼: