Browser Console

The example scripts can be found in Book 1 - Programming Step by Step and More.

Book 1 is for sale on Amazon..

Opening the Local Browser Console

To open the browser console, follow these instructions:

  • In Chrome: Press Ctrl + Shift + J (Windows/Linux) or
    Cmd + Option + J (Mac).

  • In Firefox: Press Ctrl + Shift + K (Windows/Linux) or
    Cmd + Option + K (Mac).

  • In Edge: Press Ctrl + Shift + I.

  • In Safari: Enable the Developer menu in the preferences, then press Cmd + Option + C.


Console Message

The line of code we wrote in the editor, inside the script tags

console.log("Open the console to see this message.");

Depending on the browser you are using, follow the instructions in the box above and open the console. You will see that "Open the console to see this message." is printed.

Second message printed to the Local Browser Console

The line of code we wrote in the editor—placed inside the script tags—is a function.

This function is tasked with printing text to the browser console. Let's look at the expression:

function consola(); {
console.log("If you see this message, you have opened the browser console.");
}
We call the function:
consola();

The Third Exercise We Will Perform

The line of code we will write in the editor—specifically within the `script` tags—is a function.

This function is tasked with printing text to the browser's console and, simultaneously, printing that same text directly within the browser window. Let's look at the expression:

function obtenerElemento(id) {
var elemento = obtenerElemento("miDiv1");
elemento.innerHTML = "Third output, displayed directly in the browser's client view";
console.log ("Third output, displayed in the browser's console");
} The function ends here.
Now, we call the function:
obtenerElemento("miDiv1");

The text appears in the browser within the `div` tags bearing the ID "miDiv1"—tags which, in the layout of this page, I have placed immediately below:

By the end, you should have verified the following output in your browser's console:

a) Open the console to see this message...01-consola.html:107
b) If you see this message, you have opened the browser console...01-consola.html:126
c) Third output in the browser console...01-consola.html:160


Observe how, with each console output, the console indicates exactly which page—and which line within that page—contains the code that generated the output. This information, which the console conveniently provides alongside every message, is fundamental for detecting errors; indeed, it is one of the key features of browser inspection tools designed to streamline web development.

In these exercises, we also completed a task demonstrating how to display characters directly within the browser's client-side view—one of the methods we will most frequently employ when designing web pages intended for online publication.