This is an extension of the hands-on section, using a few simple methods to deepen your impression of JavaScript.

The console object provides methods for logging output, measuring performance, and inspecting data during development. Output goes to the browser DevTools console or the Node.js terminal — never to the visible web page (unless you explicitly render it).

console.log — Basic Output 

  let greeting = "Hello, World!";
console.log(greeting); // Hello, World!

// Multiple arguments are space-separated
console.log("User:", name, "Age:", age);

Logging Objects and Arrays 

  let person = {
    name: "John",
    age: 30,
    city: "New York"
};

console.log(person);
// DevTools shows an expandable object tree

console.log([1, 2, 3]); // Expandable array

Objects logged to the console are live references — if you mutate the object after logging, expanding it in DevTools shows the updated values.

Beyond console.log

Method Purpose Example
console.error() Error messages (red in DevTools) console.error("Failed:", err)
console.warn() Warnings (yellow) console.warn("Deprecated API")
console.info() Informational messages console.info("Server started")
console.table() Tabular data display console.table(users)
console.group() Collapsible log groups See example below
console.time() Measure elapsed time See example below
console.assert() Log only if condition is false console.assert(x > 0, "x must be positive")
console.trace() Print stack trace console.trace("Called from here") 
  console.group("User Registration");
console.log("Validating email...");
console.log("Creating account...");
console.groupEnd();

Timing Code 

  console.time("fetchUsers");
await fetch("/api/users");
console.timeEnd("fetchUsers"); // fetchUsers: 142.5ms

Formatting with Specifiers 

  console.log("Name: %s, Score: %d", "Alice", 95);
console.log("Object: %o", { id: 1 });

Accessing the Console in Browsers

Chrome DevTools

  1. Open DevTools: Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac)
  2. Click the Console tab
  3. Type JavaScript expressions and press Enter to evaluate them live
  console.log("Hello from Chrome!");
document.querySelector("h1").textContent; // inspect DOM from console

Tip: Use $0 in the console to reference the currently selected element in the Elements panel.

Firefox Developer Tools

  1. Open: Ctrl+Shift+I or Cmd+Option+I
  2. Select the Console tab
  3. Filter by log level (Errors, Warnings, Logs) using the sidebar filters

Firefox supports the same console API as Chrome for standard methods.

HTML Example

Save as console-demo.html, open in a browser, and check the Console tab:

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Console Demo</title>
</head>
<body>
    <h1>Open DevTools Console to See Output</h1>
    <script>
        console.log("Page loaded");

        let user = {
            username: "JaneDoe",
            email: "[email protected]"
        };
        console.log("User:", user);
        console.table([user]);

        console.time("computation");
        let sum = 0;
        for (let i = 0; i < 1_000_000; i++) sum += i;
        console.timeEnd("computation");
    </script>
</body>
</html>

Node.js Console

In Node.js, console.log writes to stdout (standard output):

  // app.js
console.log("Server listening on port 3000");
console.error("This goes to stderr"); // useful for error streams in production

Run with node app.js. Pipe output to files: node app.js > output.log 2> errors.log.

Best Practices

  • Remove or gate debug logs before production — use a debug flag or a logging library (e.g., debug, pino).
  • Don’t log sensitive data — passwords, tokens, and PII can appear in browser history and server logs.
  • Use console.table() for arrays of objects — much easier to scan than nested object logs.
  • Prefer breakpoints over excessive logging for complex debugging — set breakpoints in DevTools Sources panel.

Troubleshooting

Issue Cause Fix
Nothing appears in console Script error before console.log Check for red errors above your log
[object Object] in string concat Objects coerced to string Use comma syntax: console.log("User:", user)
Logs missing in production Build tools strip console.* Use a logging library with log levels
Console flooded with messages Loop logging on every render Log outside hot paths; use conditional logging

The console is your first debugging tool. Master its methods early — they save hours of guesswork throughout your JavaScript career.