13518219792
这篇文章主要介绍“怎么将Chrome调试器里的JavaScript变量保存成本地JSON文件”，在日常操作中，相信很多人在怎么将Chrome调试器里的JavaScript变量保存成本地JSON文件问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么将Chrome调试器里的JavaScript变量保存成本地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再手动保存成本地文件的工作量，提升了程序员的工作效率。
到此，关于“怎么将Chrome调试器里的JavaScript变量保存成本地JSON文件”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
