What is the Developer Console in Browsers?

The developer console in a browser is a feature that allows you to see logged out messages from JavaScript but also to execute JavaScript on a live webpage. Any code that is contained within a console log statement in JavaScript will be shown in the developer console. The way to open the developer console differs on each browser, most of them will open it when pressing the F12 key but you can also open it through the browser settings menu.

The code below shows how to log a string into the developer console. When you open the console you may see messages or errors that have been logged out to the console via the JavaScript running on the page. You can also type out a console log statement in the developer console, like the one below, to log a message out to the console.

console.log("Hello World");

You can also declare and initialise variables in the developer console. This allows you to not only manipulate variables in the console but you could also assign variables to different sections of the page or different JavaScript objects within the page. If you define two number variables, as shown below, and then type “a + b” within the console it will print the result. You don’t need the ‘console.log’ function when writing code directly within the console.

var a = 5;
var b = 6;

You can also use document selectors and any other type of JavaScript within the console. The below code will return all the ‘div’ elements that are on the page, it will then print them to the console. This means you could grab a specific element in the page, or multiple elements, and then look at the JavaScript object for those elements. This could be used to discover what fields or functions an element has, or if a value is assigned correctly.


You can also use the console to modify elements within the page using JavaScript. The below code will grab one ‘div’ element on the page and change it’s background colour to be red. Obviously, you can use JavaScript to change many things with an element or elements on the page.

document.getElementsByTagName("div")[0].style.backgroundColor = "RED";

The developer console can be used to run JavaScript on a live page to either quickly calculate something, modify elements and objects on the page, or to explore elements and objects that are within the page. The important thing to note is that when you refresh or reload the page all the modifications to the page, all the variables you’ve created, will be cleared. This is because the code is running on the client-side so any changes will not be persisted on a refresh.

Leave a Reply