Google Chrome

The Chrome DevTools are a set of web authoring and debugging tools built into Google Chrome. To open Chrome DevTools, either right-click on any page element and select Inspect or open the Chrome settings menu in the top-right corner of your browser window and select More Tools > Developer Tools. Alternatively, you can use the shortcuts:

  • Command + Option + i (Mac)
  • Ctrl + Shift + i (Windows/Linux).

Mozilla Firefox

Firefox Developer Tools allow you to examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile. Also, you can download a version of of Firefox called Firefox Developer Edition that is tailored for developers, featuring the latest Firefox features and experimental developer tools. To open Firefox Developer Tools, either right-click on any page element and select Inspect Element or open the Firefox settings menu in the top-right corner of your browser window and select Developer. Alternatively, you can use the shortcuts:

  • Command + Option + i (Mac)
  • Ctrl + Shift + i (Windows/Linux)


 

Usage of console.log to display content to Javascript console.

console.log is used to display content to the JavaScript console. Run the following code in the console:

console.log("hello dear!");

Prints: “hello dear!”

Congratulations! You performed the log action on the debugging console.

The message you’ve logged is “hello dear!”. hello dear! is a string (a sequence of characters).

Optional demo example

Let’s use console.log to do something a little more interesting. Here’s a block of JavaScript code that loops through the numbers 0 through 9 and prints them out to the console:

for (var i = 0; i < 10; i++) {
  console.log(i);
}

Prints:
0
1
2
3
4
5
6
7
8
9