2.1 Alert Messages

One way to output feedback from Javascript is to use an alert.

alert("some message");

Include in a javascript file or use in the console.

2.2 Console Log

A more common way to output feedback from Javascript is to output to the console.

console.log("some message");

Include in a javascript file or use in the console.

You can pass anything into the log method that can be selected by Javascript .

console.log(document.querySelector('#main'));

Returns the markup nested below #main.

2.3 Console Dir

Access detailed information about the nodes contained in an element.

console.dir(document.querySelector('#main'));

2.4 Console Info

Very much like the log message

console.info("some message");

2.5 Console Warning

Very much like the log message

console.warning("some message");

2.6 Console Error

Very much like the log message

console.error("some message");

2.7 Console Group

Output can be grouped together using the group method.

console.group("Page Links");
console.dir(document.querySelectorAll('a'));
console.groupEnd();

The group method returns an expanded set of results.

or,

console.groupCollapsed("Paragraphs");
console.log(document.querySelectorAll('p'));
console.groupEnd();

which returns a collapsed sest of results.

2.8 Console Time

Console time wraps a timer around the code to execute.

console.time("Big Loop");
for var (i = 1,000,000 - 1; i >= 0; i--) {
    // loop does nothing
};
console.timeEnd("Big Loop");

So you can execute as many of these timers as you want within your JavaScript. Just make sure that the labels (for time and timeEnd) match perfectly.

2.9 Console Assert

Test for a condition. If the condition executes as false, then Javascript will output something to the console.

Check to see if there are two navigational links in a nav.

In the navigation, if the length of the elements within the selector is equal to 2, then we say: "Sorry, there's only two menu items".

The message is only output when the statement executes to false.

console.assert(
    document.querySelectorAll('nav ol>li').length===3,
    "Sorry, there's only two menu items"
);