Working with JavaScript can be a major challenge sometimes. First of all, you usually work in a browser where you need to refresh the page to reload a changed script. This imposes significant challenges to testing workflows where you actually move deep into a flow of events before you get to the point you are actually testing. Secondly, JavaScript handles error logging and output differently from what you are used to from PHP. JavaScript notifies you about problems by adding information to the console while the execution silently terminates.
JavaScript console
The console is a tool in the browser where you can see output from scripts and issue new commands. It is actually a good tool once you get to know it. In Chrome you activate the console by going to View > Developer > JavaScript Console in the menu bar while in Safari you first need to activate Developer tools in the Safari preferences where after you can access the console via Develop > Show Error Console (other browsers have a console too).
Script errors in console
Consider the following code snippet (notice the deliberate parse error in the “document.write” part):
<html>
<head>
<title>Hello World
</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello World)
</script>
</body>
</html>
This error will show up in Chrome’s console like below:
The red text informs you about the type of error while the black text on the right informs you about the location in the code where the error occurs. You can use the browser’s built-in features to view the source code and set breaking points to assist during the test.
Debug output in console
Sometimes you wish to output specific information in the console for debugging or other purposes. You can show something in the console anytime during your script’s execution by running the console.log() function, taking the variable to be output as its first argument.
Consider the modified code snippet below (notice the “myObject” variable and how it is output):
<html>
<head>
<title>Hello World
</title>
</head>
<body>
<script type="text/javascript">
var myObject = {
property1: 'Prop. 1 Value',
method1: function() {},
}
console.log( myObject );
</script>
</body>
</html>
The value of “myObject” will show up in the console as below:
The left side of the console now contains the value of the output variable. In this case it clearly shows an object which you can expand to explore nested values. You can see the declared property and method as well as the prototype of the object. Clicking the arrow-symbols will expand/collapse the object, depending on what you need to investigate. The right side shows where in the code the console.log() was executed – which is a great help when you start using console.log() at multiple places in your code, thus having multiple outputs in the console.
Script breaks on error
Remember that JavaScript – like most other scripting languages – stops when it encounters an error. This means whenever you experience a stuck script, you probably have an error available in the console which needs to be taken care of. Any code after the position of the error will not be executed.
Debugging browser plugins
Today most browsers function extensible through plugins and there are plenty of plugins which aim to assist developers with their coding tasks. One such plugin is Firebug which adds useful tools to your browser, making your development process easier. Another great plugin is JsonView for Chrome which makes display of JSON data much easier to debug. Similar plugins exist for most major browsers.
References & more reading
No comments yet (leave a comment)