Note: As you follow along in this tutorial, you may notice that your browser and the Console look different from the examples in the images. Browsers are frequently updated and often include new tools and possibly a new visual style. These updates should not affect your ability to use the Console in the browser.
To open the Web Console in FireFox, navigate to the ☰ menu in the top right corner next to the address bar.
Select More Tools. With that open, click on the Web Developer Tools item.
Once you do so, a tray will open at the bottom of your browser window:
You can also enter into the Web Console with the keyboard shortcut
K on Linux and Windows, or
K on macOS.
J on Linux or Windows, or
J on macOS, which will bring focus immediately to the Console.
Start with an alert that prints out the string
- alert("Hello, World!");
Once you press the
Note that the Console will also print the result of evaluating an expression, which will read as
undefined when the expression does not explicitly return something.
To print the
Hello, World! string, type the following into the Console:
- console.log("Hello, World!");
Within the console, you’ll receive the following output:
You can also perform math in the Console:
- console.log(2 + 6);
You can also try some more complicated math:
- console.log(34348.2342343403285953845 * 4310.23409128534);
Additionally, you can work on multiple lines with variables:
- let today = new Date();
- console.log("Today's date is " + today);
OutputToday's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)
If you need to modify a command that you passed through the Console, you can type the up arrow (↑) key on your keyboard to retrieve the previous command. This will allow you to edit the command and send it again.
Bear in mind that as soon as you reload a page after modifying it within the Console, it will return to its state prior to your modifying the document. Make sure to save any changes you would like to keep elsewhere.
Take an HTML document, such as the following
index.html file, to understand how to use the Console to modify it. In your favorite text editor, create an
index.html file and add the following lines of HTML:
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Date</title> </head> <body> </body> </html>
If you save the above HTML file, and load it into the browser of your choice, a blank page with the title of
Today's Date will be rendered in the browser.
- let today = new Date();
- document.body.innerHTML = "<h1>Today's date is " + today + "</h1>"
You’ll receive the following output in the Console:
Output"<h1>Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)</h1>"
Your page should be similar to the following:
You can modify the style of the page, such as the background color:
- document.body.style.backgroundColor = "lightblue";
As well as the color of the text on the page:
- document.body.style.color = "white";
Now your page should reveal something similar this:
From here, you can create a
<p> paragraph element:
- let p = document.createElement("P");
With this element created, you can then go on to create a text node that can be added to the paragraph:
- let t = document.createTextNode("Paragraph text.");
Add the text node by appending it to the variable
And finally append
p with its paragraph
<p> element and appended text node to the document:
Once you have completed these steps, your HTML page
index.html will include the following elements:
The Console provides you with a space to experiment with modifying HTML pages, but it is important to keep in mind that you’re not changing the HTML document itself when you do things on the Console. Once you reload the page it will return to a blank document.
Depending on which browser’s development tools you use, you’ll be able to use other tools to help with your web development workflow.
Each time a web page is loaded, the browser it is in creates a Document Object Model, or DOM, of the page.
These tools enable you to inspect and edit DOM elements and also let you identify the HTML related to an aspect of a particular page. The DOM can tell you whether a text snippet or image has an ID attribute and can help you determine what that attribute’s value is.
The page that you modified above would have a DOM view similar to this before reloading the page:
Additionally, you will see CSS styles in a side panel or below the DOM panel, allowing you to see what styles are being employed within the HTML document or via a CSS style sheet. For instance, notice what your sample page’s body style includes in the Firefox Inspector:
To live-edit a DOM node, double-click a selected element and make changes. For example, you can modify an
<h1> tag and make it an
As with the Console, if you reload the page you’ll return to the original saved state of the HTML document.
The Network tab of your browser’s built-in development tools can monitor and record network requests. This tab reveals the network requests that the browser makes, including when it loads a page, how long each request takes, and provides the details of each of these requests. This can be used to optimize page load performance and debug request issues.
To learn more about how to use the Network tab, you can read about working with Firefox’s Network Monitor or getting started with analyzing Network performance with Chrome’s DevTools.
When websites are responsive, they are designed and developed to both look and function properly on a range of different devices: mobile phones, tablets, desktops, and laptops. Screen size, pixel density, and supporting touch are factors to consider when developing across devices. As a web developer, it is important to keep responsive design principles in mind so that your websites are fully available to people regardless of the device that they have access to.
Both Firefox and Chrome provide you with modes for ensuring that responsive design principles are given attention as you create and develop sites and apps for the web. These modes will emulate different devices that you can investigate and analyze as part of your development process.
If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.