How to Print in JavaScript

What you’ll build or solve

You’ll display values for debugging in the console and trigger the browser’s print dialog when needed.

When this approach works best

Use console printing when you:

  • Debug variables and check function results.
  • Inspect API responses during development.
  • Trace execution flow in Node.js or the browser.

Use page printing when you:

  • Let users print invoices or reports.
  • Generate a hard copy of visible page content.
  • Add a print button to a web interface.

Skip console printing for user-facing messages. Skip window.print() in Node.js. It only works in browsers.

Prerequisites

  • A .js file or an HTML file with a <script> tag
  • A browser with DevTools, or Node.js installed

No additional setup is required.


Step-by-step instructions

1) Print output to the console

Use console methods when you want to display data for developers.

Option A: Use console.log() for general output

console.log("Hello, world!");

constuser="Alex";
console.log("User:",user);

console.log() works with any data type.

constscore=95;
constskills= ["HTML","CSS","JavaScript"];
constprofile= { name:"Sam", role:"Developer" };

console.log(score);
console.log(skills);
console.log(profile);

Run in Node:

node app.js

Or open DevTools in the browser and check the Console tab.


Option B: Use console.error() and console.warn() for categorized output

JavaScript

console.error("Something failed");
console.warn("This may cause an issue");

These methods add visual emphasis in DevTools.


Option C: Use console.table() for structured data

constusers= [
  { id:1, name:"Lina" },
  { id:2, name:"Omar" }
];

console.table(users);

This prints a formatted table in the console.

What to look for

  • Output appears in the terminal (Node) or DevTools Console (browser).
  • console.error() and console.warn() appear styled differently.
  • console.table() displays rows and columns.

2) Print a web page with window.print()

Use this when you want the user to print the visible page.

Option A: Trigger printing with an inline button

<buttononclick="window.print()">Print Page</button>

Clicking the button opens the browser’s print dialog.


Option B: Trigger printing with JavaScript

JavaScript

<buttonid="printBtn">Print</button>

<script>
document
.querySelector("#printBtn")
.addEventListener("click", () => {
window.print();
    });
</script>

This approach keeps JavaScript separate from HTML.

What to look for

  • The browser’s print dialog opens.
  • This only works in a browser, not in Node.js.

Examples you can copy

Example 1: Debug a calculation

functionmultiply(a,b) {
console.log("Inputs:",a,b);
returna*b;
}

multiply(4,5);

Use this to confirm values before returning a result.


Example 2: Inspect API-like data

constresponse= {
  status:200,
  data: { id:1, name:"Mimo User" }
};

console.log(response);
console.table([response.data]);

This makes nested data easier to inspect.


Example 3: Add a print button to a report page

<!doctype html>
<html>
<head>
<title>Report</title>
</head>
<body>
<h1>Monthly Report</h1>
<p>Total Sales: $1200</p>
<buttonid="printBtn">Print Report</button>

<script>
document
.querySelector("#printBtn")
.addEventListener("click", () => {
window.print();
        });
</script>
</body>
</html>

Clicking the button opens the print dialog.


Common mistakes and how to fix them

Mistake 1: Using print() instead of console.log()

What you might do:

print("Hello");

Why it breaks: print() is not a standard JavaScript function.

Fix:

console.log("Hello");

Mistake 2: Expecting console output to appear on the page

What you might do: run console.log() and look for text on the webpage.

Why it happens: console methods print to DevTools, not to the DOM.

Fix: Open DevTools and view the Console tab.


Mistake 3: Trying to use window.print() in Node.js

What you might do:

window.print();

Why it breaks: window does not exist in Node.

Fix: Use window.print() only inside a browser environment.


Troubleshooting

If you see console is not defined, check your runtime environment.

If nothing prints in the browser, open DevTools.

If window.print() does nothing, confirm you are running the code in a browser.

If the button click does not work, confirm the script runs after the DOM loads.

If Node cannot run your file, verify Node is installed with:

node-v

Quick recap

  • Use console.log() to print debugging output.
  • Use console.error() and console.warn() for emphasis.
  • Use console.table() for structured data.
  • Use window.print() to open the browser print dialog.
  • Console output is for developers, page printing is for users.