Question

I’ve literally been trying to debug this for a full day and it’s utterly bewildering. looking for some hints.

i have these functions inside a javascript namespace:

var ZZ = {
  bar: function(data) {
    console.log(data);
  },
  foo: function() {
    $.ajax({
      'url':'/test',
      'type':'GET',
      'dataType':'jsonp',
      'success':function(ret_json, status) {
        console.log(ret_json);   // SUCCESS_1
        console.log(ret_json[1].title);   //SUCCESS_2
        bar(ret_json);
      }
    });
  },
...
}

so i look at the ‘net’ tab of developer tools and the json returned is correct.. something like:

[{'id':1, 'url':'http://a.com', 'title':'hi'}, {'id':2, 'url':'http://b.com', 'title':'hi2'}]

now i look at the console and see that at SUCCESS_1, it prints out something like:

[{'id':1, 'url':'http://c.com', 'title':'hi3'}, {'id':2, 'url':'http://c.com', 'title':'hi3'}]

as you can see, the id is correct, but url and title is not. (i can also change the ids in the database and they will be correctly carried through)

then the next line at SUCCESS_2, it grabs the correct title! ‘hi2’

next i put a debugger statement in to the success function:
ret_json looks totally correct, but when i step into the bar() function.. the data looks wrong again.

next i add:

var hi = {};
console.log(hi);

into the success function.. it prints out.. (not joking)

{'url':'http://c.com', 'title':'hi3'}

so basically, this “default” is overwriting whatever was actually there.

i’ve added cache:false to the ajax call, i’ve tried json and jsonp, i’v tried clearing cache, i’ve tried using chrome/safari/firefox.. but nothing doing and i doubt it’s something that obvious… it’s jsut really really effed up.

any other ideas of what I can try?

---

UPDATE: adding this namespace to a different html page.
the most egregious example of

var hi = {}
console.log(hi)

printing stuff is gone
but the original problem of the ret_json having wrong data is still present.
(i still don’t have access to a working version of the previous html page)

Answer 1

@ggez44, this is because the console.log is not a synchronized call in Chrome/Firefox/Safari. There is usually a delay of a few ms.

It looks on my machine the delay is not constant, and is between 4ms and 16ms in Chrome, and about 2ms in Safari.

http://techblog.appnexus.com/2011/webkit-chrome-safari-console-log-bug/

Bizarre console.log behaviour in Chrome Developer Tools

My speculative solution to this is to do something like “console.log(a.toJSON());”. Then you end up with a pointer to the string object passed in, which is not tied to the original object.

Update: Apparently this is a “feature, not a bug”. There are a few quite decent links into the tickets in webkit mailing list.
Why does javascript object show different values in console in Chrome, Firefox, Safari?