将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再手动保存成本地文件的工作量,提升了程序员的工作效率。

要获取更多Jerry的原创技术文章,请关注公众号”汪子熙”或者扫描下面二维码:

发布了6727 篇原创文章 · 获赞 645 · 访问量 111万+
展开阅读全文

如何用js控制读取json文件数据,,也就是选取部分json数据

04-18

有一个相对比较大的json文件(这个是外部json文件),用D3做出如图所示的关系图,,,,但是,,我只想以某一个人为中心做他的关系图,,需要怎么操作数据?????????? json数据如下 ``` { "nodes":[ { "name": "云天河" , "image" : "tianhe.png" }, { "name": "韩菱纱" , "image" : "lingsha.png" }, { "name": "柳梦璃" , "image" : "mengli.png" }, { "name": "慕容紫英" , "image" : "ziying.png" }, { "name": "云天青" , "image" : "tianqing.png" }, { "name": "夙玉" , "image" : "suyu.png" }, { "name": "玄霄" , "image" : "xuanxiao.png" }, { "name": "夙瑶" , "image" : "suyao.png" }, { "name": "太清" , "image" : "taiqing.png" }, { "name": "宗炼" , "image" : "zonglian.png" }, { "name": "婵幽" , "image" : "chanyou.png" }, { "name": "奚仲" , "image" : "xizhong.png" }, { "name": "归邪" , "image" : "guixie.png" } ], "edges":[ { "source": 0 , "target": 1 , "relation":"挚友" }, { "source": 0 , "target": 2 , "relation":"挚友" }, { "source": 0 , "target": 3 , "relation":"挚友" }, { "source": 1 , "target": 2 , "relation":"挚友" }, { "source": 1 , "target": 3 , "relation":"挚友" }, { "source": 2 , "target": 3 , "relation":"挚友" }, { "source": 0 , "target": 4 , "relation":"父子" }, { "source": 0 , "target": 5 , "relation":"母子" }, { "source": 4 , "target": 5 , "relation":"夫妻" }, { "source": 0 , "target": 6 , "relation":"义兄弟" }, { "source": 4 , "target": 6 , "relation":"同门" }, { "source": 5 , "target": 6 , "relation":"同门" }, { "source": 4 , "target": 7 , "relation":"同门" }, { "source": 5 , "target": 7 , "relation":"同门" }, { "source": 6 , "target": 7 , "relation":"同门" }, { "source": 4 , "target": 8 , "relation":"师徒" }, { "source": 5 , "target": 8 , "relation":"师徒" }, { "source": 6 , "target": 8 , "relation":"师徒" }, { "source": 7 , "target": 8 , "relation":"师徒" }, { "source": 8 , "target": 9 , "relation":"同门" }, { "source": 3 , "target": 9 , "relation":"师徒" }, { "source": 2 , "target": 10 , "relation":"母子" }, { "source": 10 , "target": 11 , "relation":"主臣" }, { "source": 10 , "target": 12 , "relation":"主臣" }, { "source": 11 , "target": 12 , "relation":"同僚" } ] } `原图如下```![图片说明](https://img-ask.csdn.net/upload/201704/18/1492502984_150312.png) 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览