- What is the console used for?
The Console can be used to log information as part of the JavaScript development process, as well as allow you to interact with a web page by carrying out JavaScript expressions within the pageâs context. Essentially, the Console provides you with the ability to write, manage, and monitor JavaScript on demand.
- How do you open the Console in Google Chrome?
x To open the JavaScript Console in Chrome, you can navigate to the menu at the top-right of your browser window signified by three vertical dots in a row. From there, you can select More Tools then Developer Tools. This will open a panel where you can click on Console along the top menu bar to bring up the JavaScript Console if it is not highlighted already:
You can also enter into the JavaScript Console by using the keyboard shortcut CTRL + SHIFT + J on Linux or Windows, or COMMAND + OPTION + J on macOS, which will bring focus immediately to the Console.
- What does console.log function do?
Rather than have pop-up alerts that we need to continue to click out of, we can work with JavaScript by logging it to the Console with console.log .
- How can you change the contents of an HTML page through the console?
x If you save the above HTML file, and load it into the browser of your choice, you should see a blank page with the title of the page as Today's Date .
You can then open up the Console and begin working with JavaScript to modify the page. Weâll begin by using JavaScript to insert a heading into the HTML.
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
Youâll receive the following output on the Console:
Output
"<h1>Today's date is Sat Jun 24 2017 12:16:14 GMT-0400 (EDT)</h1>"
And at this point, your page should look similar to this:
We can also go on to modify the style of the page, such as the background color:
document.body.style.backgroundColor = "lightblue";
Output
"lightblue"
As well as the color of the text on the page:
document.body.style.color = "white";
Output
"white"
Now your page will look something like 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 we can then add to the paragraph:
let t = document.createTextNode("Paragraph text.");
Weâll add the text node by appending it to the variable p :
p.appendChild(t);
And finally append p with its paragraph <p> element and appended text node to the document:
document.body.appendChild(p);
Once you have completed these steps, your HTML page index.html will look similar to this:
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 when you do things on the Console. In this case, once you reload the page it will return to a blank document.
Understanding Other Development Tools
Depending on which browserâs development tools you use, youâll be able to use other tools to help with your web development workflow. Letâs go over a few of these tools.
DOM â Document Object Model
Each time a web page is loaded, the browser it is in creates a D ocument O bject M odel, or DOM , of the page.
The DOM is a tree of Objects and shows the HTML elements within a hierarchical view. The DOM Tree is available to view within the Inspector panel in Firefox or the Elements panel in Chrome.
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 let you determine what that attributeâs value is.
The page that we modified above would have a DOM view that looks similar to this before we reload 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. This is what our sample page aboveâs body style looks like within the Firefox Inspector:
To live-edit a DOM node, double-click a selected element and make changes. To start, for example, you can modify an <h1> tag and make it an <h2> tag.
As with the Console, if
