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

suemi 發布于2019-08-23 12:32 / 1692人閱讀

摘要：如果我想將這個變量保存到本地，以備以后進一步分析，一種做法是用將其序列號成字符串，然后再手動選中該字符串，新建一個本地文件，復制進去并保存。這種方式省去了手動將變量序列化成再手動保存成本地文件的工作量，提升了程序員的工作效率。

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

推薦一個功能強大的文件搜索工具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的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:

云服務器 GPU云服務器 js如何將json數據保存 js將數據封裝成json js 將數據轉換成json js 將數據封裝成json

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98707.html

Jerry和您聊聊Chrome開發者工具

摘要：開發者工具是日常工作使用的三大調試器之一。當然我可以在開發者工具的標簽頁手動選中響應內容，然后，再到本地新建一個文件，。注開發者工具顏色的修改希望這篇文章能讓您對開發者工具有一些更深入的了解，感謝閱讀。 Chrome開發者工具是Jerry日常工作使用的三大調試器之一。雖然工具名稱前面帶了個開發者, 但是它對非開發人員仍然有用。不信？用Chrome打開我們常用的網站，按F12，在Con...

binta 2019-08-22 16:22 評論0 收藏0
Jerry和您聊聊Chrome開發者工具

摘要：開發者工具是日常工作使用的三大調試器之一。當然我可以在開發者工具的標簽頁手動選中響應內容，然后，再到本地新建一個文件，。注開發者工具顏色的修改希望這篇文章能讓您對開發者工具有一些更深入的了解，感謝閱讀。 Chrome開發者工具是Jerry日常工作使用的三大調試器之一。雖然工具名稱前面帶了個開發者, 但是它對非開發人員仍然有用。不信？用Chrome打開我們常用的網站，按F12，在Con...

Donald 2019-08-15 15:31 評論0 收藏0
Jerry和您聊聊Chrome開發者工具

摘要：開發者工具是日常工作使用的三大調試器之一。當然我可以在開發者工具的標簽頁手動選中響應內容，然后，再到本地新建一個文件，。注開發者工具顏色的修改希望這篇文章能讓您對開發者工具有一些更深入的了解，感謝閱讀。 Chrome開發者工具是Jerry日常工作使用的三大調試器之一。雖然工具名稱前面帶了個開發者, 但是它對非開發人員仍然有用。不信？用Chrome打開我們常用的網站，按F12，在Con...

cnio 2019-08-02 10:12 評論0 收藏0
Eclipse被卡死了或者失去響應了后分析根源的一個小技巧

摘要：沒有經驗的朋友可能會用任務管理器強制結束進程，抱著僥幸的心理一次又一次得重試，希望這個卡死或者失去響應的問題可以不再出現，但往往事與愿違。本文介紹的這個通用辦法適用于一切不能正常工作時的故障排查和分析。提升程序員工作效率的工具/技巧推薦系列推薦一個功能強大的文件搜索工具SearchMyFiles 介紹一個好用的免費流程圖和UML繪制軟件-Diagram Designer 介紹Win...

王陸寬 2019-08-16 13:31 評論0 收藏0