Accessing A Browser’s JavaScript Console

JavaScript can be written in .js (JavaScript) files but can also be written directly into a web browsers JavaScript Console, which is a great way to see quick results from small bits of JavaScript coding. Today I will be looking at enabling the console within two browsers (Safari and Chrome).

Safari

To use the JavaScript Console within Safari we will first need to enable the “Develop” menu.  This can be done by clicking;

Safari > Preferences > Advanced > “Show Develop menu in menu bar”

With the “Develop” menu enabled, the JavaScript console can be viewed by clicking;

Develop > “Show JavaScript Console”

Google Chrome

The JavaScript Console can be viewed within Chrome by clicking;

View > Developer > JavaScript Console

With access to the JavaScript Console we can enter lines of JavaScript code. When entering multiple lines of JavaScript you must press shift enter (Return) to move to a new line, enter (Return) on its on will run the the code.

In the below example I’ve entered:

var a = 6
var b = 5
var c = a + b

console.log(c)

This then prints variable c (the number 11) to the console log (the console window). I could have also asked JavaScript to output variable c to an alert window by using the command window.alert(c) rather than console.log(c).

When typing commands into the JavaScript Console it will try and complete the command for you, which is a great time to play and see what various commands do.

As you can see, the JavaScript Console is a quick way to test JavaScript without having to create a .js file, all from the comfort of a web browser.