How To Use The JavaScript Developer Console

Author
Category

Introduction

Most modern browsers have built-in developer tools that allow users to interact with a web page by running JavaScript expressions. This is made possible through the JavaScript Developer Console, or the Browser Console.

The Console also allows you to log information and write and manage JavaScript on demand. Similar to the Web Console, the Browser Console logs the same type of data – JavaScript, CSS, network requests, security errors and warnings, and lines of JavaScript code that are run in the Console. However, the Browser Console logs information for the whole browser, rather than a single tab.

In this article, we will go over the basics of the JavaScript Developer Console and how to work within it using JavaScript.

Opening the Browser Console

Chrome

From your keyboard, press Ctrl+Shift+J (or Cmd+Shift+J on a Mac)

You can also navigate to the ⋮ menu in the top right corner of your browser. From there, select More Tools, and then Developer Tools.

opening the browser console in chrome

Firefox

From your keyboard, press Ctrl+Shift+J (or Cmd+Shift+J on a Mac)

Another way is to simply navigate to the ☰ menu in the top right corner. From there, click on the Developer menu (wrench icon) then select Browser Console.

opening the browser console in firefox

Working inside the Console

Once you are inside the Console, you can type and run JavaScript code.

Let’s create an alert that prints out the string “Hello, World!” Inside the Console, type the following:

>>   alert(“Hello, World!”);

To run the script, press Enter on your keyboard following the JavaScript line. You should see an alert popup in your browser similar to the image below.

typing "hello, world!" in the browser console

The Browser Console can log and run multiple sorts of information such as:

  • HTTP requests
  • Warnings and errors
  • Input/output messages

 

It displays messages from:

  • Web content hosted by all browser tabs
  • The browser’s own code
  • Add-ons

Conclusion

After reading this article, you should hopefully know how to navigate the JavaScript Developer Console within modern web browsers, as well as logging and running expressions inside of it.

Now that you know us, let's get started!