Why is google chromes console delayed? [duplicate]

Answer 1

Consider the following test:

• a={a:'a'}. It returns an object.
• a.a='b'
• expand the return from the first command. It shows a: "b"

So, an object is always shown in the state it is in when it first gets open in the Chrome developer console. For (pseudo-)arrays, what matters is the state of the object when the console gets to it. This could be right after the normal javascript returns (hard to tell why. Performance reasons, perhaps).

You can handle this by always logging elements that don't change, such as:

• primitive values: console.log("hello")
• clones of DOM nodes or jQuery objects: console.log($(this).find(".buttons .cancel").clone())

If logging an immutable object is not an option, you can still log while tracing the code: console.log(document); debugger;

Answer 2

If you pass an object to Google Chrome's console.log() that is not a primitive value like string or a number, it does not output that object's contents immediately. Probably due to some interprocess communication, there is some delay in actually getting the data from the object and outputting to the console. This will/can cause problems if you are immediately modifying the same object as you won't necessarily get the right thing displayed in the console.

One work-around is to only pass finished strings to console.log(). Since strings are immutable, they will never get changed by anything else so you won't get deceived by console.log().

In your case, you are removing the DOM elements in the next line of code. Because of Chrome's timing weirdness, this removes the DOM elements before console.log() can actually see what they are and output them. You could do something like this instead which makes the displayed string immediately and passes that string to console.log():

console.log($(this).find(' .buttons .cancel').toString());