将Chrome调试器里的JavaScript变量保存成本地JSON文件
我写了一个系列的文章，主要用来搜集一些供程序员使用的小工具，小技巧，帮助大家提高工作效率。 推荐一个功能强大的文件搜索工具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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:
