Get console.log() to display custom object description

Question

I have a custom JS object that I've made to represent a grid. Stripped down for this example it looks like this:

function Grid(c, r)
{   
    var layout = [];
    var contentPointer = 0;

    this.getCell = function(c, r)
    {
        //Return selected cell
    }

    this.getRow = function(r)
    {
        //Return selected row
    }

    this.getCol = function(c)
    {
                //Return selected column
    }

    for(var row = 0; row < r; row++)
    {
        layout[row] = [];
        for(var col = 0; col < c; col++)
            layout[row][col] = 0;
    }
}

I'm creating multiple instances of this here and there using var aGrid = new Grid(10, 10); and then manipulating them in various ways; adding/updating the contents of cells etc.

What I would like to be able to do is call console.log(aGrid); and be able to customise what is displayed by the console so I get, for instance, a string of all the cell values I've added or something similar.

In am used to Actionscript where we would use trace(aGrid); in place of console.log(aGrid); but in AS3 I could override the object's toString() method and that would update what is shown in the console output.

I have seen that I can add a toString() method to my Grid object in JS but the console does not seem to use it unless I specifically call console.log(aGrid.toString());. While this is fine, I just wondered if there is a way round this.

Does the console actually generate it's output based on some overridable method of the object being logged or does it do some crazy internal magic to get a value?

using alert(aGrid); seems to use toString() and picks up the custom value but I would rather peel my own skin off than debug a big project using alert(); :)

Any and all comments very welcome. Thank you.

PS - I don't know if different browsers treat console.log() differently but I am using Chrome v33.

Bergi · Accepted Answer · 2014-04-03 10:03:11Z

4

I have seen that I can add a toString() method to my Grid object in JS but the console does not seem to use it unless I specifically call console.log(aGrid.toString());. While this is fine, I just wondered if there is a way round this

No, there is no way around this. The console alone does decide how to display the passed arguments - and Chrome console lets you dynamically inspect objects instead of trying to serialize them somehow. If you want a custom output, you will need to pass it a string.

answered Apr 3, 2014 at 10:03

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SergeS · Accepted Answer · 2014-04-03 09:59:56Z

0

console.log accepts Object as argument(s), and if you put it there, you will be able to inspect it in Chrome console.

So remove .toString() and it will do the trick

console.log("aGird", aGrid );

answered Apr 3, 2014 at 9:59

SergeS

11.9k3 gold badges31 silver badges35 bronze badges

Comments

Vlad Bezden · Accepted Answer · 2016-08-19 01:57:19Z

0

You can use console.table() for this. console.table allows you to specify what properties would you like to view. For instance

console.table(aGrid);                            // will show all properties
console.table(aGrid, 'firstName');               // will show only firstName property
console.table(aGrid, ['firstName', 'lastName']); // will show firstName and lastName properties

answered Aug 19, 2016 at 1:57

Vlad Bezden

90.7k27 gold badges261 silver badges190 bronze badges

Collectives™ on Stack Overflow

Get console.log() to display custom object description

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related