将Chrome调试器里的JavaScript变量保存成本地JSON文件

简介: 将Chrome调试器里的JavaScript变量保存成本地JSON文件

image.pngimage.png

(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)

image.png

把这段代码粘贴到Chrome开发者工具的console标签页执行,给标准的console对象新增一个save方法。这个方法有两个输入参数,第一个为待保存成本地JSON文件的JavaScript变量,第二个参数为本地JSON文件的名称。


还是回到上面的例子,我在Chrome开发者工具的console页面执行了上述的JavaScript代码后,紧接着再执行下面的语句:


console.save(button, “button.json”);

image.pngimage.png

保存到本地即可。这种方式省去了手动将JavaScript变量序列化成JSON string再手动保存成本地文件的工作量,提升了程序员的工作效率。

目录
相关文章
|
14天前
|
JSON JavaScript 数据格式
vue 处理JSON文件——上传导入、下载导出、在线预览
vue 处理JSON文件——上传导入、下载导出、在线预览
28 7
|
14天前
|
JavaScript 前端开发 CDN
前端 JS 经典:package.json 属性详解
前端 JS 经典:package.json 属性详解
12 1
|
22天前
|
Web App开发 JSON JavaScript
JavaScript对象常用操作JSON总结
JavaScript对象常用操作JSON总结
23 8
|
10天前
|
JavaScript
Vue如何查看node版本---- package.json 文件中的 engines
Vue如何查看node版本---- package.json 文件中的 engines
|
12天前
|
JSON 数据格式
Content type ‘text/plain;charset=UTF-8‘ not supported,这里要把测试文件转为json格式
Content type ‘text/plain;charset=UTF-8‘ not supported,这里要把测试文件转为json格式
|
13天前
|
JSON JavaScript 前端开发
|
14天前
|
JavaScript
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷,5种手写深拷贝)
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷,5种手写深拷贝)
6 0
|
15天前
|
JSON JavaScript 前端开发
一篇文章讲明白json文件格式详解
一篇文章讲明白json文件格式详解
14 0
|
24天前
|
XML JSON 前端开发
第十一篇JavaScript JSON与AJAX
第十一篇JavaScript JSON与AJAX
13 0
|
7天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
19 2