Question

Possible Duplicate:
Is Chrome’s JavaScript console lazy about evaluating arrays?

Basically what I am finding is that google chrome is having issues with it’s developer tools.

Take this snippet for example:

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

When that snippet is triggered, if there are two items that match those selectors google chrome outputs [, ]. basically it is finding the elements, but it seems to be slower at displaying the data than it should be.

I want to be able to log what items I am deleting, but as it stands I must run it first without the .remove() line. and then after I know that is working I can run it again with the remove() function.

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;