JavaScript Console Methods: log, warn, and error

The browser console is where JavaScript prints messages while you develop. The three methods beginners use most are the general log method, the warning method, and the error method.

Each one sends a message to the console. Browser DevTools display them differently so problems are easier to scan.

A Quick Comparison

Here is what all three message levels look like when you run them together. The code is small, but each line has a different job:

javascript

console.log("User profile loaded successfully.");
console.warn("Profile image is missing, using default.");
console.error("Failed to save user preferences.");

In browser DevTools, the first line appears as a normal message. The second is styled as a warning, and the third is styled as an error.

The visual difference matters when your console has many lines. Warnings and errors stand out instead of disappearing inside ordinary debug output.

General Logging

General logging is the workhorse. It prints values while your code runs, which makes it useful for checking variables and program flow.

javascript

const username = "Alice";
const score = 42;
 
console.log("Player:", username);
console.log("Score:", score);
console.log({ username, score });

The console prints the player name, the score, and an object containing both values. In browser DevTools, the object can be expanded so you can inspect its properties.

Printing Variable Values

The most common use is checking what a variable holds at a specific point in your code:

javascript

function calculateDiscount(price, isMember) {
  console.log("Price before discount:", price);
 
  if (isMember) {
    price = price * 0.9;
  }
 
  console.log("Final price:", price);
}
 
calculateDiscount(100, true);

The console shows Price before discount: 100 and Final price: 90. That tells you the member branch ran and changed the value.

Warning Messages

Warnings are for situations that are not quite errors but deserve attention. Browsers usually display warnings with a yellow warning style.

javascript

function setTheme(themeName) {
  const supportedThemes = ["light", "dark", "system"];
 
  if (!supportedThemes.includes(themeName)) {
    console.warn(`Theme "${themeName}" is not supported.`);
    themeName = "light";
  }
 
  console.log(`Theme set to: ${themeName}`);
}

Call setTheme("blue") and the console first shows a warning that blue is not supported, then logs Theme set to: light. The code handled the problem and continued running.

Use warnings for missing optional data, deprecated function calls, suspicious configuration, or a fallback that saved the page from breaking.

Error Messages

Errors are for failures you want to notice quickly. Browser DevTools usually style them as errors and may show stack information depending on the environment.

javascript

function saveToDatabase(record) {
  if (!record.id) {
    console.error("Cannot save record: missing ID.", record);
    return false;
  }
 
  return true;
}
 
saveToDatabase({ name: "Alice" });

The console shows an error saying the record is missing an ID, along with the object that caused the problem. The function returns early, but the console method itself is not what stops execution.

Use errors for failed requests, missing required data, caught exceptions you need to record, or conditions that should never happen.

Filtering Console Output

As your project grows, the console fills up quickly. Browser DevTools let you filter by message type so you only see what you need.

In Chrome DevTools, click the "Default levels" dropdown in the console toolbar and choose "Errors" or "Warnings" to hide less important messages. This is especially helpful when you have many general logs but only want to see the problems.

When to Use Each Method

A common beginner mistake is using one log style for everything. When you open a console full of identical-looking lines, warnings and errors blend in and get missed.

Using the right message type makes important output stand out so you can act on it.

Logging Objects and Arrays

All three methods can print objects and arrays:

javascript

const user = { name: "Bob", role: "admin", lastLogin: null };
 
console.log("User object:", user);
console.warn("User has never logged in:", user);
console.error("Admin account has no email:", user);

Browser DevTools usually show objects as interactive trees. Expand the object to inspect properties and nested values.

Once you are comfortable with console output, learn how to execute JavaScript in Chrome DevTools and how to read JavaScript stack traces so your debugging does not stop at simple print statements.