我写了一个系列的文章,主要用来搜集一些供程序员使用的小工具,小技巧,帮助大家提高工作效率。
- 推荐一个功能强大的文件搜索工具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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
相关推荐
Atom-xatom-debug-chrome.zip,用于xatom调试的google chrome调试器插件xatom铬合金脱buger,atom是一个用web技术构建的开源文本编辑器。
如何使用chrome自带的Javascript调试工具
Chrome插件jsonViewer,格式化json插件,便于查看json文件
JSONView_for_Chrome,一款基于Chrome浏览器的JSONView在线格式化工具。
用于 Emacs 的 Chrome Javascript 调试器 使用 chrome 调试 websocket 协议 ( ) 的 Javascript 调试器。 直接在 emacs 中调试您的 Javascript 代码。 支持来自 chrome 开发人员工具的所有已知调试器功能,如步进、...
chrome-json-handle
ECharts官网(https://echarts.baidu.com)描述:ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层...
控制台能够显示当前页面中的javascript错误以及警告,并提示出错的文件和行号,方便调试,这些错误提示比起浏览器本身提供的错误提示更加 详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用,你能够在...
chrome的json插件,方便查看json字符串,格式转化,离线也能用
Chrome-json插件
最好的开发调试浏览器chrome,还需要一个json数据格式化展示插件
1、点击【Download Zip】,插件下载完成,解压缩到相应目录(D:\...4、点击”加载正在开发的扩展程序…” 选择插件目录(D:\Download\JSONView-for-Chrome-master\WebContent); 5、安装完成,重新加载 (Ctrl+R)。
chrome插件,用于格式化json,解析json
将下载的jsonview.crx拖到chrome选项→更多工具...→扩展程序即可安装。安装后会将获取到的json数据格式化,便于阅读。
yformater - chrome谷歌浏览器json格式化json高亮json解析插件 , yformater是一款chrome浏览器插件,用来格式化(高亮)服务端接口返回的json数据。 ps:本资源上传当前为止所有版本,强烈建议安装最新版本(如果你...
AdvanceRestClient加载的json文件definitions.json 谷歌chrome浏览器
Chrome扩展AdvanceRestClient加载的json文件definitions.json
Chrome Postman JsonView离线扩展
小米快游戏调试器 小米快游戏调试环境 配套调试的chrome版本 chrome 版本79 环境: 机器:mac 10.13.6 CocosCreater 2.1.4
jsonview是chrome浏览器的一个插件,用来在浏览器中查看json数据