Using the browser console to test code
In JavaScript programming, using the web browser console is the best method for testing JavaScript program source code for immediate testing and directly interacting or communicating with dynamic website webpages in real time. Where you can execute small modules of JavaScript program, preview the immediate program result, and debug your existing JavaScript program source code directly in the web browser to make it error free.

So, let’s learn how to operate the web browser console in JavaScript programming.
Opening the web browser console.
- Universal Chrome, Edge, and Brave web browsers – To open the developer tools in these given web browser software, press Ctrl + Shift + I in Windows and Linux operating systems or Cmd + Option + I keys in Mac operating systems. Then, click Manually in the Console tab.
- Firefox web browser – In Firefox web browser, press Ctrl + Shift + I in Windows and Linux operating systems or Cmd + Option + I keys in Mac operating systems and move manually to the Console tab option.
- Apple Safari web browser – In Apple Mac Safari web browser, go to Safari Preferences → Advanced → Develop menu and then enable the Developer menu. Then press Cmd + Option + I keys manually to open the Safari web browser console.
Writing and testing JavaScript program code in the web browser console.
When you open the web browser console window, JavaScript programmers can start immediate JavaScript program source code testing if needed.
So let’s test JavaScript program source code in the web browser console.
Javascript program basic code execution example.
console.log(“Welcome to, Javascript!”);
This will print the Welcome to, Javascript! statement in the web browser console window.
Web browser console variable declaration and logging example.
let emp_name = “Mark”;
console.log(emp_name); // Result is – Mark
Basic console arithmetic example.
let mul = 4×2 ;
console.log(mul); // Result is – 8
Defining and calling a function in the console example.
function message(student) {
console.log(“Welcome to javascript, ” + student + “!”);
}
message(“Mark”); // Result is – Welcome to javascript Mark
Modifying the DOM in JavaScript example.
When you are doing dynamic testing in an existing webpage in JavaScript programming, then you can also immediately interact or communicate with the HTML elements of the webpage.
Example of changing the background color of a webpage in the console.
document.body.style.backgroundColor = “aqua”;
Or, change the content of a specific element in a particular webpage, for example, a header element with id=”header”.
document.getElementById(“header”).innerText = “Modify Heading!”;
Using the console for debugging JavaScript programs.
You can use the browser console to debug code by inspecting variables and checking the flow of execution.
Using the console for debugging JavaScript programs.
You can test your program code by logging values at different points in the JavaScript console window.
let p = 3;
let q = 7;
let total = p + q;
console.log(“addtion is -“, total); // This previews the total of both variables in the console window
Example of using console.table() to view data in a table format in the console.
If you are working with array or object data types in a JavaScript program, you can use the console.table() function to preview these data types in a more readable table format.
let language = [“Javascript”, “Java”, “Python”, “Html”,];
console.table(language);
Here, the array will be displayed in the JavaScript program in a table format, making it easier to test individual array elements.
Setting a breakpoint in the console in a JavaScript program example.
JavaScript programmers can use the debugger; method to set breakpoints in their JavaScript program source code. When the debugger encounters a debugger statement in a JavaScript program, it stops the execution of the JavaScript program code, allowing you to test JavaScript program variables, and move on to the next step through the program source code.
function checkDebugging() {
let p = 2;
let q = 4;
debugger; // here program Execution will pause here
let total = p + q;
console.log(total);
}
checkDebugging();
checkDebugging() – In the above program when the code debugger reaches the program statement, it will stop at checkDebugging(), and you can test the existing program variables, or preview the program code line by line.
Testing code in the context of a JavaScript webpage.
If you are dynamically testing JavaScript in the context of a realtime webpage, you can access the active elements of the webpage, and modify them as needed.
Testing code in the context of a JavaScript webpage.
document.getElementById(“myElement”).innerText = “Welcome to the console window !”;
Testing code in the context of a JavaScript webpage.
document.body.style.backgroundColor = “yellow”;
Get information about the JavaScript webpage.
console.log(document.title); // Logs the title of the current webpage
Testing external libraries in a JavaScript program.
If you are working with external libraries, e.g., jQuery, React library frameworks in a JavaScript program, you can also test them directly in the web browser console.
For example, if you have jQuery loaded in a webpage, you can use it directly in the console whenever needed.
$(‘p’).css(‘color’, ‘lime’); // This changes the text color of all <p> paragraph elements in the current webpage to lime color.
Clearing the JavaScript console.
You can clear the JavaScript console when you see the output of a previously run program or when the console window becomes cluttered.
console.clear();
This will remove all messages previously logged from the console in a JavaScript program.
JavaScript console screen Additional tips.
- Multi-line code – If you want to enter multi-line code in a JavaScript console program, press the Shift + Enter keys instead of just pressing the Enter key. This allows you to enter multiple lines of program code before the current program stops executing.
- Code completion – You can use the Tab key for JavaScript program code completion. If you type part of a program variable or function name, and then press the Tab key, it will attempt to complete it for you.
JavaScript console completion.
The web browser console is a very powerful tool for testing and debugging JavaScript program source code. Here you can execute small program source code snippets, communicate with a webpage in realtime, debug your existing program source code, and even modify the contents of a webpage from within the console.