Ever wondered how to save any data or a large object from Chrome browser console while debugging?
Let’s talk about it and get the hands on that.
It’s pretty easy to do it with a few clicks and a simple JavaScript code snippet in your browser console.
Note: In Firefox, right click on object/data in the console, it shows an option to copy and you can just use it.
Steps for configuration setup:
- Open browser console and go to Sources -> Snippets in the console.
- Either right-click on the left side panel to make a new file or click on ‘New snippet‘ option and save the file as any name with a .js extension for example saveToConsole.js.
- Paste below JavaScript code into the snippet file saveToConsole.js and save it in the console with Ctrl + s.
(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);(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);(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);
- Right click on the saveToConsole.js file and run the snippet.
That’s it for the simple configuration setup and now you can just call console.save() to download any data/object from your chrome browser console and save to a file.
Like if you have an object named Reports which can be printed in the console, you can run console.save(Reports) in your console and save it into a file.
Happy debugging!
Reference(s):
- https://coderwall.com/p/prhwzg/add-console-save-to-chrome
- http://bgrins.github.io/devtools-snippets/#console-save