Tutorial: Console

The JavaScript Console


The JavaScript console object can be used in several interesting ways. To open/close it in the WAT simulator, select View -> Windows -> Inspector. By default the Inspector window will appear in the bottom dock, but it may be moved or undocked as well. The console is in the Console tab on the inspector. To access it on a WAT device, enable debugging, then go to the development tab of the device web page.

Using the Console to Debug JavaScript

You can use the console to debug JavaScript in two distinct ways:

  1. You can enter JavaScript interactively in the WAT Simulator's Inspector Pane and see the results immediately.
  2. You can include various console functions in your JavaScript to log data to the Trace Log while the script is running.

Entering JavaScript Directly

In the WAT Simulator's Inspector Pane, you can enter JavaScript in the terminal interactively to help debug your script. For example, you can call functions defined in the script and see the results; you can evaluate expressions that include variables or functions declared in your script; and you can query the values of variables directly.

This is particularly helpful when used in combination with breakpoints in your code, allowing you to pause and inspect the script interactively at any point.

The console has auto-completion support when entering JavaScript. As you type, JavaScript variables, properties, and function names are suggested in gray. Pressing the Right Arrow key accepts the current suggestion. If multiple selections begin with the same prefix, you can cycle through the suggestions using the Tab key. If there is only one suggestion, the Tab key accepts it.

Typing a variable name and pressing Enter displays the variable's current value.

WAT Simulator Inspector Pane

Any changes you make to the DOM using JavaScript from the console are immediately displayed in the Elements pane, as well as in the browser window.

Trace Logger

The JavaScript Console trace logger is designed to allow programs to produce messages of interest.

The Logging functions take a message-object as a parameter. This message-object is logged to the trace log. A message-object can contain a string, one or more variables, or a combination.

The functions console.log, console.info, console.warn, console.debug, and console.error all log a message. The only difference between the functions is the color-coding of the log entry and the inclusion of marker icons for warnings and errors. In the WAT Simulator, you can filter these messages for warnings and/or errors.

console.log("A console.log message...");
console.warn("A console.warn message...");
console.error("A console.error message...");

WAT Simulator Inspector Pane

Note: You can also instruct the system to automatically popup the trace dialog for any logged messages of a specific severity or higher by setting the $ui.popupLevel to the desired level. It is set to non by default.

// Messages of priority Debug or higher to cause the trace dialog to pop up.
var ui = $wat.log('ui')[0];
ui.popupLevel = $ui.traceLevels.Debug;

In the WAT Simulator, you can log a JavaScript object to the console.

Console Assertions

Console assertions use the signature: console.assert(expression, message-object)

If expression evaluates to false, logs the message to the Trace Log. This will be displayed at the console.error level.

console.assert(myInt==0,"Uh oh, myInt has a value of 0!!!");

WAT Simulator Inspector Pane