| Interactive Media Design

JavaScript Console

The JavaScript Console is a powerful and necessary tool for anyone who is working with JavaScript. It is a debugging tool that is built into most modern browsers and has two primary functions:

  1. Logs information related to the current page including: networking requests, security errors and warnings, and informational messages and errors explicitly logged from the JavaScript code run by the current page.
  2. Allows for the execution of JavaScript related or unrelated with the current page.

Accessing the Console

While most modern browsers have a console, how you access the console is different for each browser and operating system.

The following is a list of instructions on how to get access the JavaScript Console for the major modern browsers.

Google Chrome

The Chrome DevTools are a set of web authoring and debugging tools built into Google Chrome. Use the DevTools to iterate, debug and profile your site. Learn more about Chrome DevToolsopen in new window.

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.

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 Firefox called Firefox Developer Edition that is tailored for developers, featuring the latest Firefox features and experimental developer tools. Learn more about Firefox Developer Toolsopen in new window.

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.

Microsoft Edge (Chromium)

The new Microsoft Edge browser is now adopted the Chromium open source project, which is the same web platform using by other browsers such as Chrome and Opera. It also means that Microsoft Edge is available for other platforms include macOS, iOS, and Android.

The Microsoft Edge DevTools will look and feel very much like the Chrome DevTools. To open developer tools in Microsoft Edge simply press F12 or Ctrl+Shift+I. Learn more about Microsoft Edge DevToolsopen in new window

Safari

Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize a website for peak performance and compatibility on both platforms. Learn more about Safari Web Inspectoropen in new window.

To access Safari's Web Development Tools, the Develop menu must first be enabled. This can be done through Safari's Advanced preferences. Once enabled, you can right-click on any page element and select Inspect Element to open Web Development Tools.

The Console Object

The console object allows access to the browser's console. It can log messages, issue warnings and errors, and output the values of strings, arrays, and objects.

log() Method

The most basic way to log to the console is to use console.log() in the JavaScript code. This will create a basic message in the console.

console.log('Hello, Students!')

The console.log() method can be a very simple way to debug your code by checking the value of variables, the results of expressions, or to check if the message appears at all.

Assume the following variable has been created:

const students = [
  { name: 'Ted', section: 1},
  { name: 'Ed', section: 2},
  { name: 'Ned', section: 1},
  { name: 'Red', section: 3}
]

Different messages could be logged using the following methods:

console.log(students)
console.log(typeof students)

Other Methods

While the log() method is by far the most common, there are many other methods that can be used to display data in the console in many different ways.

MethodDescription
warn()This method will issue a warning, which will be displayed in the console in a different color (usually in a shade of yellow or orange)
error()This method will issue an error to the console (usually in a shade of red).
assert()This method takes two arguments, will display the second argument, if the first is false.
table()This method will display an array or object as a table.
group()This method is used to start a group of logs, which will be displayed together.
groupEnd()This method is used to end a group.
time()This method is used to start a timer.
timeEnd()This method is used to stop the timer and display the time in milliseconds.

Execute JavaScript

The JavaScript Console also allows for the execution of JavaScript code. This can be very useful for testing the functionality of a page or application. It can also serve as a JavaScript playground as any valid JavaScript will run and execute in the Console including declaring variables, defining functions, and arithmetic expressions.

To execute these commands, just type or paste the code into the console followed by the "Enter" key.

See Also

References