Updates from QA Training

Javascript Debugging – Part 1 Finding your developer console

The first of a short series of tools and tricks to help you with debugging your javascript. In this blog I show you how to use a debug console.


David Walker | 21 June 2012

The first of a short series of tools and tricks to help you with debugging your javascript. In this blog I show you how to use a debug console.

48% of javascript developers do not test… 

I could just leave it at that because wow its shocking enough!

Out of those that do test many do this:

alert('message 1'); 

Please, please do not do this an alert It is a modal alert box which freezes the UI but does not freeze anything else so if you had say some AJAX or a timer on the page it would not freeze those operations. As a result it may cause your test to become skewed or even cause other errors.

All modern browsers come with a javascript debugger that roughly follow the same rules.  Safari (with the developer tools switched on), Firefox with Firebug installed. IE can do testing but it is a bit less refined and Opera have implemented testing slightly differently in Dragonfly. Chrome does it all out of the box so I'm going to outline testing using that browser.

To bring up the developer console in any page you can right click on the page and chose inspect element. On windows you can also press F12 on a Mac command-option-i.

You'll see something similar to this:

If you've not used it before take a look around but for what we are about to do you need to choose console.

In your HTML editor of choice create a page and enter the following script:

<script type="text/javascript">
var x = 5;
console.log("The value of x is: " + x);
</script>

Your editor may be giving you warning about console not existing by the way. Ignore them as Chrome does understand the script.

If you open the page in Chrome at this point (reopening the editor if necessary) you should get a message saying 'The value of x is: 5'.

The console.log method is an extremely useful tool allowing you to capture variables or write messages to the developer console without artificially interrupting the UI with alert boxes.

In part 2 of this series we will examine trapping objects as part of the debugging process


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.