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”

safari show develop menu
safari show develop menu

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

Develop > “Show JavaScript Console”

safari show js console

Google Chrome

The JavaScript Console can be viewed within Chrome by clicking;

View > Developer > JavaScript Console

chrome 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)

javascript var console log
javascript var console log

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).

JavaScript window.alert()
JavaScript window.alert()

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.

js complete command
JavaScript complete command

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.

One thought on “Accessing A Browser’s JavaScript Console

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.