資訊專欄INFORMATION COLUMN
摘要：如果我想將這個(gè)變量保存到本地，以備以后進(jìn)一步分析，一種做法是用將其序列號(hào)成字符串，然后再手動(dòng)選中該字符串，新建一個(gè)本地文件，復(fù)制進(jìn)去并保存。這種方式省去了手動(dòng)將變量序列化成再手動(dòng)保存成本地文件的工作量，提升了程序員的工作效率。
我寫了一個(gè)系列的文章，主要用來搜集一些供程序員使用的小工具，小技巧，幫助大家提高工作效率。
推薦一個(gè)功能強(qiáng)大的文件搜索工具SearchMyFiles
介紹一個(gè)好用的免費(fèi)流程圖和UML繪制軟件-Diagram Designer
介紹Windows任務(wù)管理器的替代者-Process Explorer
介紹一個(gè)強(qiáng)大的磁盤空間檢測工具Space Sniffer
如何在電腦上比較兩個(gè)相似文件的差異
程序員工作效率提升系列-推薦一個(gè)JSON文件查看和修改的小工具
我們?cè)贑hrome開發(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)去并保存。
這套辦法可行但是太麻煩了?，F(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 = 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對(duì)象新增一個(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ù)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙"或者掃描下面二維碼:
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/98707.html
摘要：開發(fā)者工具是日常工作使用的三大調(diào)試器之一。當(dāng)然我可以在開發(fā)者工具的標(biāo)簽頁手動(dòng)選中響應(yīng)內(nèi)容，然后，再到本地新建一個(gè)文件，。注開發(fā)者工具顏色的修改希望這篇文章能讓您對(duì)開發(fā)者工具有一些更深入的了解，感謝閱讀。 Chrome開發(fā)者工具是Jerry日常工作使用的三大調(diào)試器之一。雖然工具名稱前面帶了個(gè)開發(fā)者, 但是它對(duì)非開發(fā)人員仍然有用。不信？ 用Chrome打開我們常用的網(wǎng)站，按F12，在Con...
摘要：開發(fā)者工具是日常工作使用的三大調(diào)試器之一。當(dāng)然我可以在開發(fā)者工具的標(biāo)簽頁手動(dòng)選中響應(yīng)內(nèi)容，然后，再到本地新建一個(gè)文件，。注開發(fā)者工具顏色的修改希望這篇文章能讓您對(duì)開發(fā)者工具有一些更深入的了解，感謝閱讀。 Chrome開發(fā)者工具是Jerry日常工作使用的三大調(diào)試器之一。雖然工具名稱前面帶了個(gè)開發(fā)者, 但是它對(duì)非開發(fā)人員仍然有用。不信？ 用Chrome打開我們常用的網(wǎng)站，按F12，在Con...
摘要：開發(fā)者工具是日常工作使用的三大調(diào)試器之一。當(dāng)然我可以在開發(fā)者工具的標(biāo)簽頁手動(dòng)選中響應(yīng)內(nèi)容，然后，再到本地新建一個(gè)文件，。注開發(fā)者工具顏色的修改希望這篇文章能讓您對(duì)開發(fā)者工具有一些更深入的了解，感謝閱讀。 Chrome開發(fā)者工具是Jerry日常工作使用的三大調(diào)試器之一。雖然工具名稱前面帶了個(gè)開發(fā)者, 但是它對(duì)非開發(fā)人員仍然有用。不信？ 用Chrome打開我們常用的網(wǎng)站，按F12，在Con...
摘要：沒有經(jīng)驗(yàn)的朋友可能會(huì)用任務(wù)管理器強(qiáng)制結(jié)束進(jìn)程，抱著僥幸的心理一次又一次得重試，希望這個(gè)卡死或者失去響應(yīng)的問題可以不再出現(xiàn)，但往往事與愿違。本文介紹的這個(gè)通用辦法適用于一切不能正常工作時(shí)的故障排查和分析。 提升程序員工作效率的工具/技巧推薦系列 推薦一個(gè)功能強(qiáng)大的文件搜索工具SearchMyFiles 介紹一個(gè)好用的免費(fèi)流程圖和UML繪制軟件-Diagram Designer 介紹Win...
閱讀 2703·2021-11-25 09:43
閱讀 2790·2021-11-04 16:09
閱讀 1783·2021-10-12 10:13
閱讀 932·2021-09-29 09:35
閱讀 937·2021-08-03 14:03
閱讀 1828·2019-08-30 15:55
閱讀 3062·2019-08-28 18:14
閱讀 3652·2019-08-26 13:43
