将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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

原文地址:https://www.cnblogs.com/sap-jerry/p/9819204.html

时间: 2024-10-17 21:40:32

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

在调试器里看Windows 10的Linux子系统

Windows 10是微软第三代NT团队的力挽狂澜之作,大刀阔斧地改造革新,目标是重塑Windows(Reinvent Windows)!在众多新特征中,Linux环境子系统(WSL)无疑是最具开创性和最拉风的一个. 启用WSL 在2016年3月30日开幕的Build大会上,微软向广大开发者宣布Windows 10将支持Linux应用.在2016年4月7号推送的 Windows 10 build 14328 fast ring中首次包含了WSL.在Windows 10的周年更新(Annivers

JS篇 chrome调试器常用功能

3. Source选项卡: 左侧的面板中,Source subtab列出了所有JS脚本:Content script subtab显示了Chrome插件中用到的JS:中间面板显示了脚本内容代码: 点击右键:Reveal in navigator,定位脚本文件的位置: 左下角:{}Pretty format标志 用于格式化压缩后的JS脚本文件 XHR 断点.按事件类型触发断点 Restart frame:重新执行方法,避免刷新页面: 异常时断点

在Chrome调试器中引入jQuery

在Console中输入以下代码并回车,Console显示"function (a,b){return new m.fn.init(a,b)}"说明导入成功,就可以在Console中直接执行jQuery函数了. var jq = document.createElement('script'); jq.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; document.getElementsByTag

调试器如何工作(2)

调试器如何工作:第二部分--断点 原作者:Eli Bendersky http://eli.thegreenplace.net/2011/01/27/how-debuggers-work-part-2-breakpoints 这是关于调试器如何工作系列文章的第二部分.在这之前确保你读过第一部分. 在这部分 我将展示在调试器中如何实现断点.断点是调试的两大支柱之一--另一个是能够在被调试进程内存里查看值.在第一部分里我们已经预览过另一个支柱,但断点仍然笼罩在神秘的面纱下.看完本文,它们不再是了.

调试器工作原理

调试器工作原理(3):调试信息 本文是调试器工作原理探究系列的第三篇,在阅读前请先确保已经读过本系列的第一和第二篇. 本篇主要内容 在本文中我将向大家解释关于调试器是如何在机器码中寻找C函数以及变量的,以及调试器使用了何种数据能够在C源代码的行号和机器码中来回映射. 调试信息 现代的编译器在转换高级语言程序代码上做得十分出色,能够将源代码中漂亮的缩进.嵌套的控制结构以及任意类型的变量全都转化为一长串的比特流--这就是机器码.这么做的唯一目的就是希望程序能在目标CPU上尽可能快的运行.大多数的C代

Chrome - 调试 Web Worker 加载的 js 文件

以前在使用 requirejs 时遇到过加载的 js 无法在控制台调试的情况,今天做了下总结 - 创建了 script 标签引入的 js 在 FF,Chrome 都能在调试器里找到. - Web Worker 引入的 js 无法直接在 FF,Chrome 的调试器里找到,需要在: Chrome 中:在引入的 js 文件顶部加上`//@ sourceURL=async_test.js`,然后就能在 (no domain) 中找到该 js FF 中:怎么处理还不会... eg: test.html

【转】浅谈LLDB调试器

随着Xcode 5的发布,LLDB调试器已经取代了GDB,成为了Xcode工程中默认的调试器.它与LLVM编译器一起,带给我们更丰富的流程控制和数据检测的调试功能.LLDB为Xcode提供了底层调试环境,其中包括内嵌在Xcode IDE中的位于调试区域的控制面板,在这里我们可以直接调用LLDB命令.如图1所示: 图1:位于Xcode调试区域的控制台 在本文中,我们主要整理一下LLDB调试器提供给我们的调试命令,更详细的内容可以查看The LLDB Debugger. LLDB命令结构 在使用LL

iOS LLDB调试器

随着Xcode 5的发布,LLDB调试器已经取代了GDB,成为了Xcode工程中默认的调试器.它与LLVM编译器一起,带给我们更丰富的流程控制和数据检测的调试功能.LLDB为Xcode提供了底层调试环境,其中包括内嵌在Xcode IDE中的位于调试区域的控制面板,在这里我们可以直接调用LLDB命令.如图1所示: 图1:位于Xcode调试区域的控制台 在本文中,我们主要整理一下LLDB调试器提供给我们的调试命令,更详细的内容可以查看The LLDB Debugger. LLDB命令结构 在使用LL

chrome调试 JavaScript 脚本

随着 JavaScript 应用的复杂性逐渐提高,开发者需要有力的调试工具来帮助他们快速发现问题的原因,并且能高效地修复它.Chrome DevTools 提供了一系列实用的工具使得调试 JavaScript 应用不再是一件痛苦的事. 在这个部分,我们会通过调试 Google Closure hovercard demo 以及其他的动态示例来让你了解怎么去使用这些工具. 注意:如果你是 Web 开发者并且希望获得最新版的 DevTools,你应该使用 Chrome Canary 源面板 源面板允