Updates from QA Training

Javascript Debugging – Part 2 Objects

There is an absolute powerhouse hidden in the console api ready to seriously make your work with javascript objects much easier. I use it all the time, it helped me get to grip with many of the HTML5 javascript APIs and understand many JSON data structures.


David Walker | 25 June 2012

There is an absolute powerhouse hidden in the console api ready to seriously make your work with javascript objects much easier. I use it all the time, it helped me get to grip with many of the HTML5 javascript APIs and understand many JSON data structures.

First of all go read Part 1 if you have not already I build upon it here.

There is an absolute powerhouse hidden in the console api ready to seriously make your work with javascript objects much easier. I use it all the time, it helped me get to grip with many of the HTML5 javascript APIs and understand many JSON data structures it is the wondrous:

console.dir(object);

It is supported in Chrome, Firebug, Safari and IE9 (but you must have the console open for IE not to throw a wobbler at you. Once again I will be using Chrome in this demonstration.

One of the pivotal objects in javascript is the navigator object with it you can start filtering code by browser, version or locale. It is implemented quite differently in the major browsers. Before I discovered console.dir I used to demonstrate its members using a forin loop:

for (prop in navigator){
  document.write(prop + " : "+  navigator[prop]);
  document.write("<br />");
}

The for… in  statement can be used with any object or associative array revealing the members of the array or object. Try it out first my advice would be to try it across different browsers and see how much it varies. Where it become irksome however is where you suddenly get something like this:

mimeTypes : [object MimeTypeArray]

That means we have an object within an object and we need to write a recursive call to go deeper and wow you lovely folks look way to nice to inflict that terror upon. Instead is time to save some time, effort and suffering with console.dir

Add the following code after the for loop:

console.dir(navigator);

Then run the page again after reopening the console tab of the navigator and you should see a completely mapped object in the console go take a look at those mime types and we can now see every browser holds an indexed arrays of mime types it understands.

This dear readers is my gift to you and I wish someone had told me about it when I first started working with AJAX.


David-Walker---sq

David Walker

Portfolio Director - Digital Transformation and Emerging Technology

David is a change-driven technologist who works closely with organisations and industry experts to understand the opportunities and threats posed by new technology. David has designed multiple learning solutions that have helped organisations redefine their business strategy and culture – creating new business models that view IT as a strategic competency rather than a support function.
Talk to our learning experts

Talk to our team of learning experts

Every business has different learning needs. QA has over 30 years of experience in combining the highest quality training with the most comprehensive range of learning services, ensuring the very best fit for your organisation.

Get in touch with our learning experts to talk about how we can help.