摘要：如果我想将这个变量保存到本地，以备以后进一步分析，一种做法是用将其序列号成字符串，然后再手动选中该字符串，新建一个本地文件，复制进去并保存。这种方式省去了手动将变量序列化成再手动保存成本地文件的工作量，提升了程序员的工作效率。
我写了一个系列的文章，主要用来搜集一些供程序员使用的小工具，小技巧，帮助大家提高工作效率。
推荐一个功能强大的文件搜索工具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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/98707.html
摘要：开发者工具是日常工作使用的三大调试器之一。当然我可以在开发者工具的标签页手动选中响应内容，然后，再到本地新建一个文件，。注开发者工具颜色的修改希望这篇文章能让您对开发者工具有一些更深入的了解，感谢阅读。 Chrome开发者工具是Jerry日常工作使用的三大调试器之一。虽然工具名称前面带了个开发者, 但是它对非开发人员仍然有用。不信？ 用Chrome打开我们常用的网站，按F12，在Con...
摘要：开发者工具是日常工作使用的三大调试器之一。当然我可以在开发者工具的标签页手动选中响应内容，然后，再到本地新建一个文件，。注开发者工具颜色的修改希望这篇文章能让您对开发者工具有一些更深入的了解，感谢阅读。 Chrome开发者工具是Jerry日常工作使用的三大调试器之一。虽然工具名称前面带了个开发者, 但是它对非开发人员仍然有用。不信？ 用Chrome打开我们常用的网站，按F12，在Con...
摘要：开发者工具是日常工作使用的三大调试器之一。当然我可以在开发者工具的标签页手动选中响应内容，然后，再到本地新建一个文件，。注开发者工具颜色的修改希望这篇文章能让您对开发者工具有一些更深入的了解，感谢阅读。 Chrome开发者工具是Jerry日常工作使用的三大调试器之一。虽然工具名称前面带了个开发者, 但是它对非开发人员仍然有用。不信？ 用Chrome打开我们常用的网站，按F12，在Con...
摘要：没有经验的朋友可能会用任务管理器强制结束进程，抱着侥幸的心理一次又一次得重试，希望这个卡死或者失去响应的问题可以不再出现，但往往事与愿违。本文介绍的这个通用办法适用于一切不能正常工作时的故障排查和分析。 提升程序员工作效率的工具/技巧推荐系列 推荐一个功能强大的文件搜索工具SearchMyFiles 介绍一个好用的免费流程图和UML绘制软件-Diagram Designer 介绍Win...
阅读 2621·2021-11-25 09:43
阅读 2724·2021-11-04 16:09
阅读 1634·2021-10-12 10:13
阅读 881·2021-09-29 09:35
阅读 880·2021-08-03 14:03
阅读 1777·2019-08-30 15:55
阅读 2989·2019-08-28 18:14
阅读 3489·2019-08-26 13:43
