By Wesley


2011-09-12 13:57:56 8 Comments

In Safari with no add-ons, console.log will show the object at the last state of execution, not at the state when console.log was called.

I have to clone the object just to output it via console.log to get the state of the object at that line.

Example:

var test = {a: true}
console.log(test); // {a: false}
test.a = false; 
console.log(test); // {a: false}

11 comments

@Zach Lysobey 2013-03-12 15:04:54

Vanilla JS:

@evan's answer seems best here. Just (ab)use JSON.parse/stringify to effectively make a copy of the object.

console.log(JSON.parse(JSON.stringify(test)));

JQuery specific solution:

You can create a snapshot of an object at a certain point in time with jQuery.extend

console.log($.extend({}, test));

What is actually happening here is jQuery is creating a new object with the test object's content, and logging that (so it will not change).

AngularJS (1) specific solution:

Angular provides a copy function that can be used to the same effect: angular.copy

console.log(angular.copy(test));

Vanilla JS wrapper function:

Here is an function which wraps console.log but will make a copy of any objects before logging them out.

I wrote this in response to a few similar but less robust functions in the answers. It supports multiple arguments, and will not try to copy things if they are not regular objects.

function consoleLogWithObjectCopy () {
  var args = [].slice.call(arguments);
  var argsWithObjectCopies = args.map(copyIfRegularObject)
  return console.log.apply(console, argsWithObjectCopies)
}

function copyIfRegularObject (o) {
  const isRegularObject = typeof o === 'object' && !(o instanceof RegExp)
  return isRegularObject ? copyObject(o) : o
}

function copyObject (o) {
  return JSON.parse(JSON.stringify(o))
}

example usage: consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})

@Takashi Harano 2017-02-08 15:25:52

There is an option to use a debugger library.

https://debugjs.net/

Just include the script into your web page and put log statements.

<script src="debug.js"></script>

Logging

var test = {a: true}
log(test); // {a: true}
test.a = false; 
log(test); // {a: false}

@A. Qaoud 2017-01-15 10:42:17

Simply refresh the page after you open the console or open the console before you submit the request to the targeted page....

@Andrew 2016-12-09 14:33:32

You might want to log the object in a human readable way:

console.log(JSON.stringify(myObject, null, 2));

This indents the object with 2 spaces at each level.

How can I pretty-print JSON using JavaScript?

@Mangesh Bhapkar 2016-01-06 06:12:52

Just print whole object on console.

console.dir(object);

@Raidri 2016-01-06 10:52:38

This is already said in the accepted answer ...

@Dave 2014-04-21 21:31:37

I may be shot for suggesting this, but this can be taken one step further. We can directly extend the console object itself to make it more clear.

console.logObject = function(o) {
  (JSON.stringify(o));
}

I don't know if this will cause some type of library collision/nuclear meltdown/rip in the spacetime continuum. But it works beautifully in my qUnit tests. :)

@Zach Lysobey 2016-08-26 19:16:04

This doesn't log anything. It just swallows the result of stringify-ing something. Funny that its gotten upvotes

@Migio B 2014-04-02 22:04:34

I defined an utility:

function MyLog(text) {
    console.log(JSON.stringify(text));
}

and when I want to log on console I simply do:

MyLog("hello console!");

It works very well!

@evan 2011-09-12 14:06:20

I think you're looking for console.dir().

console.log() doesn't do what you want because it prints a reference to the object, and by the time you pop it open, it's changed. console.dir prints a directory of the properties in the object at the time you call it.

The JSON idea below is a good one; you could even go on to parse the JSON string and get a browsable object like what .dir() would give you:

console.log(JSON.parse(JSON.stringify(obj)));

@Andrew D. 2011-09-12 14:24:45

For me in Chrome13 no difference between console.log and console.dir

@evan 2011-09-12 15:12:04

Hm, that's surprising- it works in Firebug. I had thought it was the same in Webkit.

@Polemarch 2014-01-14 22:26:45

What I'm seeing in Chrome is that if you open the console after the log statement has run, then it'll do the lazy evaluation when you expand it. But if the console is already open (e.g. you open the console and then hit refresh on the page), it'll do eager evaluation -- i.e. print the value at the time the log statement was run.

@Polemarch 2014-01-14 22:29:51

Also, dir is to JSON as shallow-copy is to deep-copy. console.dir() will only evaluate the top-level object's properties (other more deeply nested objects wouldn't be evaluated), whereas JSON will go recursively.

@Luke 2014-03-06 23:34:42

Likewise for me console.dir does not work in Chrome (v33). Here's a comparison of the solutions that people have offered: jsfiddle.net/luken/M6295

@Magne 2014-05-08 13:32:59

I didn't experience the effect that Polemarch did. I had the console open all the time, and console.dir still didn't behave differently from console.log.

@Anders Lindén 2015-01-19 09:55:29

console.dir() gave me an expanded listing in firefox, which is not the case with console.log(). Can I have them both collapsed?

@jerome 2015-02-27 20:31:06

Usually console.dir() does the trick, but today is showing only a little tooltip that when hovered, says "Object state below is captured upon first expansion". What?

@jja 2016-01-31 01:31:26

console.dir and console.log do not seem to behave differently. Relevant: code.google.com/p/chromium/issues/detail?id=508719 (Link also clears @jerome's question)

@evan 2016-07-15 21:25:24

At the time of writing, .log and .dir behaved differently.

@flipperweid 2016-11-04 08:39:20

In conclusion: console.dir(); don't works (at least in Chrome!) and print the reference too. So you should use the JSON idea: console.log(JSON.parse(JSON.stringify(obj))); (as mentioned second in evans answer)

@Chris 2013-03-29 19:41:41

using Xeon06's hint, you may parse his JSON in an object, and here is the log function I now use to dump my objects :

function odump(o){
   console.log($.parseJSON(JSON.stringify(o)));
}

@Alex Turpin 2011-09-12 14:10:54

What I usually do if I want to see it's state at the time it was logged is I just convert it to a JSON string.

console.log(JSON.stringify(a));

@Chris 2013-03-29 19:37:40

Great, that was a nice hint for me : I just had to parse it again to have my object right in the console. function odump(o){ console.log($.parseJSON(JSON.stringify(o))); }

@ah-shiang han 2014-03-06 04:18:27

thanks this works for me! console.dir didn't print it

@Alex McMillan 2014-09-09 23:35:19

what if your object happens to contain a circular structure?

@Alex Turpin 2014-09-11 01:21:35

@AlexMcMillan You could use one of several libraries that allow for JSON stringification of objects with circular references.

@Mars 2015-03-20 21:04:49

Geez. This should be a simple, obvious thing to be able to do. Instead we have to stringify, parse, log, and use a special circular reference library!?! I think the browsers need to do a better job of supporting simple debugging needs.

@Joe 2011-09-12 14:08:27

That > Object in the console, isn't only showing the current state. It actually is deferring reading the object and it's properties until you expand it.

For example,

var test = {a: true}
console.log(test);
setTimeout(function () {
    test.a = false; 
    console.log(test);
}, 4000);

Then expand the first call, it will be correct, if you do it before the second console.log returns

Related Questions

Sponsored Content

31 Answered Questions

[SOLVED] How can I upload files asynchronously?

60 Answered Questions

[SOLVED] How can I merge properties of two JavaScript objects dynamically?

73 Answered Questions

[SOLVED] How can I get query string values in JavaScript?

72 Answered Questions

[SOLVED] How can I convert a string to boolean in JavaScript?

  • 2008-11-05 00:13:08
  • Kevin
  • 1559544 View
  • 2084 Score
  • 72 Answer
  • Tags:   javascript

32 Answered Questions

[SOLVED] Reference - What does this error mean in PHP?

27 Answered Questions

[SOLVED] How to change an element's class with JavaScript?

  • 2008-10-12 20:06:43
  • Nathan Smith
  • 2299633 View
  • 2481 Score
  • 27 Answer
  • Tags:   javascript html dom

24 Answered Questions

[SOLVED] How can I refresh a page with jQuery?

33 Answered Questions

15 Answered Questions

[SOLVED] How can I update the current line in a C# Windows Console App?

  • 2009-05-20 15:12:53
  • IVR Avenger
  • 175328 View
  • 448 Score
  • 15 Answer
  • Tags:   c# windows console

Sponsored Content