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
Tags:

Leave a Reply

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