Using the web console

We will need a sandbox to play in. For the purpose of this recipe, we'll use one of the default examples built into Meteor.

In a terminal window, enter the following command:

$ meteor create --example leaderboard

Once created, navigate to the leaderboard folder and start Meteor:

$ cd leaderboard
$ meteor

We can now navigate to our leaderboard example page (http://localhost:3000) using the web browser of our choice.

We need to enable the web console in various browsers. In no particular order, here's how to get to the web console on the browsers you're likely to be working with:

Safari

Enable the Develop menu by going to Safari | Preferences | Advanced (CMD+, shortcut if you prefer) and making sure the Show Development Menu in menu bar option is enabled:

Now, on any web page, click on Show Error Console under Develop (or use the CMD + Alt + C shortcut):

This will bring up the web console, as shown in the following screenshot:

Firefox

On any web page, click on the Web Console menu option (CMD + Alt + K shortcut) under Tools | Web Developer:

The web console now appears as shown in the following screenshot:

Chrome

On any web page, click on the Developer Tools menu item (CMD + Alt + I shortcut) under View | Developer:

This will bring up the web console, as shown in the following screenshot:

To show what's possible with a web console, let's create a new scientist, and add some points to Tesla. Because, Imma let you finish, but Nikola Tesla was the greatest scientist of all time. Of. All. Time.

The web console acts as an extension of your code. You are able to receive log messages, call exposed methods and events, or change and instantiate global variables. You are able to do this dynamically in real time, which can have a lot of advantages as you're testing or debugging.

With a few well-composed lines of code, we were able to replicate the behavior found in the event handlers and methods that belong to the app. In other words, we were able to manually test things, rather than having to modify, save, and retest the code. This kind of impromptu testing can really save us time.

The web console and the associated development tools can perform all kinds of client-side debugging and testing tasks. You can run prewritten scripts, pause code during execution, monitor variables and the call stack, and even create your own methods and variables dynamically.