4

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.

Community
  • 1
  • 1
Hailwood
  • 89,623
  • 107
  • 270
  • 423
  • 2
    Err.. Why the off topic close vote? This is programming related is it not? I am wondering if I am doing something wrong, or if there is something that can be done to make the console work properly for now if this is a bug :/ – Hailwood Nov 18 '12 at 21:11
  • You can clone the object before logging it. This way, it should not pick up any changes. – John Dvorak Nov 18 '12 at 21:12
  • @DanD. Sure, but actually in `console.log($(this).find(' .buttons .cancel'));` there is nothing that could change the logged object afterwards. – Bergi Nov 18 '12 at 22:44

2 Answers2

4

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;

John Dvorak
  • 26,799
  • 13
  • 69
  • 83
1

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());
jfriend00
  • 683,504
  • 96
  • 985
  • 979