'View javascript object model in real time

Are there tools or techniques (other than repeated console.log() calls) to view the javascript object model used in a web page in real time? eg something like:

    firstUser (User)
    -- userName Joe Bloggs (String)
    -- userEmail [email protected] (String)
    -- userSelections (Array)
    ----[1,2,4]

    secondUser (User)
    -- userName John Doe (String)
    -- userEmail [email protected] (String)
    -- userSelections (Array)
    ----[1,2,3]

I know this can be achieved using console.log(firstUser) and console.log(secondUser) but it would be useful to be able to display the entire data model so that I can see variables being altered in real time.

javascript browser

Solution 1:^[1]

One option is using the watch panel on the right inside the source tab to help you monitor different variables

You could also use the console.table() method (instead of console.log) which displays tabular data as a table.

Solution 2:^[2]

The best approach is configure the logger package ( I really recommend pinojs ) and configure a "log level" strategy for your application, you can read more about here

But you also can do that:

console.log(JSON.stringefy(user))

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ran Turner
Solution 2	ralvescosta

'View javascript object model in real time

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]