Export data from the Chrome browser console

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:

1. Open browser console and go to Sources -> Snippets in the console.
   
2. 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.
3. 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);

4. 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