Skip to content
Home » Export data from the Chrome browser console

Export data from the Chrome browser console

chrome-dev-tool

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.

    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    (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);
  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 consoleyou 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

Leave a Reply

Your email address will not be published. Required fields are marked *