📘 Lesson · Lesson 04

Console and Output

Console और Output

What the Console Is

The console is a built-in panel in every browser where JavaScript can print messages — and it's your single most important tool for learning and debugging. When you're writing code, you constantly need to check "what is this value right now?" or "did this code run?" The console answers these instantly. It's a text output area, separate from the web page itself, meant for developers. Every professional uses it hundreds of times a day. Get comfortable with the console early, and JavaScript becomes far less mysterious — you can always peek inside your running code.

console.log — your best friend

console.log("Hello, world!");        // prints text
console.log(42);                     // prints a number
console.log(5 + 3);                  // prints 8 (evaluates first)

let name = "Priya";
console.log(name);                   // prints the value: Priya
console.log("The user is " + name);  // prints: The user is Priya

console.log() prints whatever you put inside the parentheses to the console. This is THE command you'll use most in all of JavaScript. Put text in quotes ("Hello"), or a number, or a variable name (to see its value), or even a calculation (which it works out first). It's how you check that your code is doing what you expect — print a variable to confirm its value, or print a message to confirm a certain line ran. Whenever something isn't working, your first instinct should be: "let me console.log it and see." This simple command is the foundation of debugging.

Opening DevTools — where output appears

To see console output, open the browser's Developer Tools:

  • Press F12    (on most browsers)
  • Or right-click the page → "Inspect"
  • Then click the "Console" tab

Your console.log messages appear there.

Console output doesn't show on the web page — it appears in the browser's DevTools console. To see it, open DevTools (press F12, or right-click and choose "Inspect"), then click the Console tab. This is the same DevTools you may have met in the CSS course for inspecting the box model — it has multiple tabs, and Console is where JavaScript output and errors appear. Keep it open while you code. When you write console.log("test") and reload the page, "test" shows up in this panel. If your logs aren't appearing, the console tab probably just isn't open.

console.error, console.warn, and more

console.log("Normal message");      // plain output
console.warn("This is a warning");  // shows in yellow, with a warning icon
console.error("This is an error");  // shows in red, with an error icon
console.table([1, 2, 3]);           // displays data as a neat table

Beyond console.log, there are helpful variations. console.warn() prints a yellow warning message, and console.error() prints a red error message — both make important messages stand out visually from ordinary logs. console.table() displays arrays and objects (which you'll learn later) in a clean, readable table format. You'll mostly use plain console.log, but knowing that warn and error exist helps you read the console when a website (or your own code) reports problems in these colours.

Logging Multiple Values at Once

let name = "Aman";
let age = 20;

// Separate multiple values with commas:
console.log(name, age);              // prints: Aman 20
console.log("Name:", name, "Age:", age);  // prints: Name: Aman Age: 20

You can log several values in one console.log by separating them with commas. This is really useful for checking multiple things at once, or for labelling your output so you know what each value is: console.log("Name:", name, "Age:", age) prints a clear, labelled line. The commas keep each value distinct (with a space between them) — cleaner than trying to join everything with +. Labelling your logs like this ("Name:", "Total:", etc.) is a great habit: when you have many logs, you can instantly tell which is which. A small trick that makes debugging much easier.

Exam Corner

Q: What is console.log used for? Printing values or messages to the browser console — the main tool for testing and debugging.

Q: How do you open the console? Open DevTools (F12 or right-click → Inspect) and click the Console tab.

Q: Where does console.log output appear? In the browser's DevTools console, not on the web page.

Q: What's the difference between console.log, warn, and error? They print normal, yellow-warning, and red-error messages respectively.

Q: How do you log multiple values in one statement? Separate them with commas: console.log("Age:", age).

Console क्या है

Console हर browser में built-in panel है जहां JavaScript messages print कर सकता है — और यह सीखने तथा debugging के लिए आपका सबसे ज़रूरी tool है. जब आप code लिख रहे हों, आपको लगातार जांचना होता है "अभी इस value का मान क्या है?" या "क्या यह code चला?" Console इनका तुरंत जवाब देता है. यह text output area है, web page से अलग, developers के लिए बना. हर professional इसे दिन में सैकड़ों बार use करता है. Console के साथ जल्दी सहज हो जाइए, और JavaScript कहीं कम रहस्यमय हो जाता है — आप हमेशा अपने चलते code के अंदर झांक सकते हैं.

console.log — आपका best friend

console.log("Hello, world!");        // text print karta hai
console.log(42);                     // number print karta hai
console.log(5 + 3);                  // 8 print karta hai (pehle evaluate)

let name = "Priya";
console.log(name);                   // value print karta hai: Priya
console.log("The user is " + name);  // print: The user is Priya

console.log() parentheses के अंदर जो कुछ आप रखें उसे console में print करता है. यह पूरी JavaScript में सबसे ज़्यादा use होने वाला command है. Text quotes में रखिए ("Hello"), या number, या variable नाम (उसका value देखने को), या calculation भी (जिसे यह पहले हल करता है). यह ऐसे ही आप जांचते हैं आपका code वही कर रहा जो आप उम्मीद करते हैं — variable print करके उसका value confirm कीजिए, या message print करके confirm कीजिए कोई line चली. जब कुछ काम न करे, आपकी पहली प्रवृत्ति होनी चाहिए: "इसे console.log करके देखता हूँ." यह सरल command debugging की नींव है.

DevTools खोलना — output कहां दिखता है

Console output dekhne ko, browser ke Developer Tools kholiye:

  • F12 dabaiye    (zyadatar browsers me)
  • Ya page par right-click → "Inspect"
  • Phir "Console" tab par click kariye

Aapke console.log messages wahan dikhte hain.

Console output web page पर नहीं दिखता — यह browser के DevTools console में आता है. इसे देखने को, DevTools खोलिए (F12 दबाइए, या right-click करके "Inspect" चुनिए), फिर Console tab पर click कीजिए. यह वही DevTools है जो आप CSS course में box model inspect करने को मिल चुके — इसके कई tabs हैं, और Console वह है जहां JavaScript output और errors दिखते हैं. Code करते समय इसे खुला रखिए. जब आप console.log("test") लिखें और page reload करें, "test" इस panel में दिखता है. अगर आपके logs नहीं दिख रहे, console tab शायद बस खुला नहीं है.

console.error, console.warn, और ज़्यादा

console.log("Normal message");      // saada output
console.warn("This is a warning");  // peele rang me, warning icon ke saath
console.error("This is an error");  // laal rang me, error icon ke saath
console.table([1, 2, 3]);           // data ko saaf table me dikhata hai

console.log के अलावा, मददगार variations हैं. console.warn() पीला warning message print करता है, और console.error() लाल error message — दोनों ज़रूरी messages को साधारण logs से दृश्य रूप से अलग दिखाते हैं. console.table() arrays और objects (जो आप बाद में सीखेंगे) को साफ, readable table format में दिखाता है. आप ज़्यादातर plain console.log use करेंगे, पर warn और error होते हैं जानना console पढ़ने में मदद करता है जब कोई website (या आपका खुद का code) इन रंगों में problems report करे.

एक साथ कई Values Log करना

let name = "Aman";
let age = 20;

// Kai values commas se alag karo:
console.log(name, age);              // print: Aman 20
console.log("Name:", name, "Age:", age);  // print: Name: Aman Age: 20

आप एक console.log में कई values log कर सकते हैं उन्हें commas से अलग करके. यह एक साथ कई चीज़ें जांचने, या अपने output को label करने के लिए बहुत उपयोगी है ताकि आप जानें हर value क्या है: console.log("Name:", name, "Age:", age) साफ, labelled line print करता है. Commas हर value को अलग रखते हैं (उनके बीच space के साथ) — सब कुछ + से जोड़ने की कोशिश से साफ. अपने logs को ऐसे label करना ("Name:", "Total:", आदि) बढ़िया आदत है: जब आपके कई logs हों, आप तुरंत बता सकते हैं कौन-सा कौन-सा है. छोटा trick जो debugging बहुत आसान बनाता है.

Exam Corner

Q: console.log किसलिए use होता है? Values या messages को browser console में print करने को — testing और debugging का मुख्य tool.

Q: Console कैसे खोलते हैं? DevTools खोलिए (F12 या right-click → Inspect) और Console tab पर click कीजिए.

Q: console.log output कहां दिखता है? Browser के DevTools console में, web page पर नहीं.

Q: console.log, warn, और error में क्या अंतर है? वे क्रमशः normal, पीला-warning, और लाल-error messages print करते हैं.

Q: एक statement में कई values कैसे log करते हैं? उन्हें commas से अलग कीजिए: console.log("Age:", age).

← Back to JavaScript Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.