我寫了一個系列的文章，主要用來搜集一些供程序員使用的小工具,，小技巧,，幫助大家提高工作效率。

• 推薦一個功能強(qiáng)大的文件搜索工具SearchMyFiles

• 介紹一個好用的免費(fèi)流程圖和UML繪制軟件-Diagram Designer

• 介紹Windows任務(wù)管理器的替代者-Process Explorer

• 介紹一個強(qiáng)大的磁盤空間檢測工具Space Sniffer

• 如何在電腦上比較兩個相似文件的差異

• 程序員工作效率提升系列-推薦一個JSON文件查看和修改的小工具

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

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

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

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

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

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

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

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

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

要獲取更多Jerry的原創(chuàng)技術(shù)文章，請關(guān)注公眾號"汪子熙",。