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

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

我们在Chrome开发者工具的Console标签页里,可以输入JavaScript变量然后回车,查看这些变量的值。


比如我用类jQuery选择器的语法 var button = $(‘button’)来返回当前页面所有button标签的实例。


image.png


如果我想将这个变量保存到本地,以备以后进一步分析,一种做法是用JSON.stringfy将其序列号成JSON字符串,然后再手动选中该字符串,新建一个本地文件,复制进去并保存。

image.png



这套办法可行但是太麻烦了。现在我向大家分享一种自动化的做法。

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


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


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


image.png


回车,Chrome自动弹出一个JSON文件保存窗口:


image.png


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


相关文章
|
1月前
|
Web App开发 JSON JavaScript
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
19 0
|
1月前
|
JSON 数据格式 开发者
什么是 JSON 文件的 Schema
什么是 JSON 文件的 Schema
84 0
|
2月前
|
XML JSON JavaScript
|
2月前
|
Web App开发 Python
Python使用selenium的Chrome下载文件报错解决
Python使用selenium的Chrome下载文件报错解决
15 0
|
2月前
|
Web App开发 Python
python+selenium+Chrome 监测文件是否下载完毕
python+selenium+Chrome 监测文件是否下载完毕
21 0
|
2月前
|
Web App开发 前端开发
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
129 0
|
1月前
|
编解码 JavaScript 前端开发
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
36 0
|
2月前
|
存储 JSON API
Python 自动化指南(繁琐工作自动化)第二版:十六、使用 CSV 文件和 JSON 数据
Python 自动化指南(繁琐工作自动化)第二版:十六、使用 CSV 文件和 JSON 数据
11 1
|
2月前
|
JSON JavaScript Go
JSON文件读写最佳实践
JSON文件读写最佳实践
19 0
|
2月前
|
JSON 数据格式
vscode中读取json文件settings.json进行适配主题的方法
vscode中读取json文件settings.json进行适配主题的方法