I’ve written a series of articles to collect some of the tools and tricks that programmers can use to improve their productivity.

  • I recommend a powerful file search tool called SearchMyFiles
  • Introduces a user-friendly free flow chart and UML drawing software -Diagram Designer
  • Describes an alternative to Windows task manager -Process Explorer
  • Introduced a powerful disk Space detection tool Space Sniffer
  • How do I compare the differences between two similar files on a computer
  • Programmer Productivity Series – Recommends a small tool for viewing and modifying JSON files

In the Chrome Developer Tools Console TAB, you can type JavaScript variables and press Enter to see the values of those variables.

For example, I use the jQuery-like selector syntax var button = $(‘button’) to return all instances of button tags on the current page.

If I want to save this variable locally for later analysis, one option is to use JSSON.stringfy to make its sequence number a JSON string, then manually select that string, create a new local file, copy it, and save it.

It works but it’s too much trouble. Now I’m going to share with you an automated approach.

(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)

Paste this code into the Console TAB of the Chrome Developer Tools and execute it, adding a save method to the standard Console object. This method takes two input parameters, the first being the JavaScript variable of the JSON file at the location to be saved, and the second being the name of the local JSON file.

Returning to the example above, I executed the above JavaScript code on the Chrome Developer Tools Console page, followed by the following statement:

console.save(button, “button.json”);

Enter and Chrome automatically pops up a JSON file save window:

Save it locally. This approach saves the programmer the work of serializing JavaScript variables into JSON strings and saving the local files manually, which improves the programmer’s work efficiency.

For more of Jerry’s original technical articles, please follow the official account “Wang Zixi” or scan the QR code below: