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