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

Head of Emerging Technologies

David is a change driven technologist who continually looks to adapt and expand his knowledge and understanding of his field. Over the least eighteen years David has led technology and training companies through emerging fields and technology trends helping them to understand the future and develop business opportunities. As Head of Emerging Technologies he works closely with customers and industry experts to ensure the opportunities and threats of new technology trends designing custom learning solutions to help small and enterprise organisation adapt and make the most of their people - ensuring QA is ready when our customers need to navigate the minefield of the fast moving digital landscape. His passion is in advanced web engineering principals and vendor neutral thick client design/development technologies reflected in his research, analysis and courseware development experience combined with his training delivery skills. As a technologist he is the lead instructor and syllabus author for web development technologies and specialising in Agile, DevOps, and User Experience driven approaches to developing solutions. He has authored courses such as HTML5, Responsive Web Development, User Experience, NodeJS, Javascript and jQuery.
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.