Running JavaScript in the Browser Console

Section 1.2: Setting Up the Environment

Tutorial 1.2.2: Running JavaScript in the Browser Console

Running JavaScript in the Browser Console

Modern browsers come with built-in developer tools that include a JavaScript console, a powerful environment for writing, testing, and debugging JavaScript code. In this tutorial, we’ll learn how to access and use the console.

Why Use the Browser Console?

Quick Testing: Test snippets of JavaScript code without setting up a development environment.
Debugging: Check errors and log values during code execution.
Real-Time Interaction: Manipulate and inspect web page elements dynamically.

Accessing the Browser Console

Google Chrome:

Open the browser.
Right-click on the webpage and select Inspect or press Ctrl+Shift+I (Cmd+Option+I on macOS).
Go to the Console tab.

Mozilla Firefox:

Open the browser.
Right-click on the webpage and select Inspect or press Ctrl+Shift+K (Cmd+Option+K on macOS).
Navigate to the Console tab.

Microsoft Edge:

Right-click on the webpage and select Inspect or press Ctrl+Shift+I.
Open the Console tab.

Safari (macOS):

Go to Safari > Preferences > Advanced and enable the Show Develop menu in menu bar option.
Right-click on the webpage and select Inspect Element or press Cmd+Option+C.
Click on the Console tab.

Running JavaScript in the Console

Simple Code Execution:

Type JavaScript directly in the console and press Enter to execute.
Example:

     console.log("Hello, World!");

Performing Calculations:

Use the console like a calculator:

     5 + 10 * 2;

Inspecting Elements:

Select an element on the webpage and access it in the console using $0:

     $0.style.color = "red";

Defining Functions:

Write multi-line code directly in the console:

     function greet(name) {
       return `Hello, ${name}!`;
     }
     greet("Alice");

Tips for Using the Console

Clear the Console:

Use the clear() function or click the "Clear Console" button.

Shortcuts:

Arrow keys: Navigate through previous commands.
Shift+Enter: Write multi-line code.

Error Messages:

The console displays detailed error messages to help debug code.

Limitations of the Console

Code written in the console is not saved.
Not suitable for large-scale projects or complex scripts.

function recursiveFunction(num) { console.count('Recursive function called'); if (num > 0) recursiveFunction(num - 1); } recursiveFunction(5); // Output: Recursive function called: 1, 2, 3, 4, 5, 6

// Example JSON string const jsonString = '{"name":"John","age":30,"city":"New York"}'; // Parse the JSON string into a JavaScript object const parsedObject = JSON.parse(jsonString); // Log the parsed object to the console console.log('Parsed Object:', parsedObject);

// Function to calculate the GCD of two numbers using the Euclidean Algorithm function calculateGCD(a, b) { while (b !== 0) { const temp = b; b = a % b; a = temp; } return a; } // Calculate and log the GCD of two numbers (e.g., 48 and 18) const gcd = calculateGCD(48, 18); console.log('GCD of Two Numbers:', gcd);

Choose Your Plan

Programming & Frameworks

Web & Design

Data & Databases

DevOps, Tools & Misc

Electronics & Embedded Systems

Running JavaScript in the Browser Console

Section 1.2: Setting Up the Environment

Tutorial 1.2.2: Running JavaScript in the Browser Console