JavaScript · Lesson 31 / 32 · தமிழ்
Debugging JavaScript
கருத்தைப் புரிந்துகொள்ளுங்கள். Code-ஐ மாற்றி இயக்குங்கள். ஒரு சிறிய பயிற்சியால் கற்றதை உறுதி செய்யுங்கள்.
மூலப் பாட விளக்கங்கள் தமிழில் உள்ளன. கூடுதல் concept, practice மற்றும் answer notes ஆங்கிலத்தில் உள்ளன.
முக்கியக் கருத்து
Debugging is a process: reproduce the failure, inspect values, identify the first incorrect assumption, then verify the fix. Log inputs as well as results.
Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.
விரிவான விளக்கங்கள்
JavaScript Debug பண்றது எப்படி?
Debugging என்பது code-ல இருக்குற errors கண்டுபிடிச்சு fix பண்றது. JavaScript-ல powerful built-in tools மற்றும் browser DevTools இருக்கு.
debugger Statement
function calculateTotal(items) {
let total = 0;
for (const item of items) {
debugger; // ← DevTools-ல execution இங்க PAUSE ஆகும்
total += item.price;
}
return total;
}
// Function call பண்றதுக்கு முன்னாடி DevTools (F12) open பண்ணு
calculateTotal([{ price: 10 }, { price: 20 }]);நினைவு வச்சுக்கோ: Code commit பண்றதுக்கு முன்னாடி debugger statements remove பண்ணு. DevTools closed-ஆ இருந்தா effect இல்ல.
Advanced console Techniques
// Named groups
console.group("📦 Order Processing");
console.log("Validating...");
console.groupEnd();
// எத்தனை தரம் call ஆச்சுன்னு count பண்ணு
for (let i = 0; i < 5; i++) {
console.count("loop"); // "loop: 1", "loop: 2" ...
}
// Call stack trace
function a() { b(); }
function b() { console.trace("How did I get here?"); }
a();
// Variable name-உடன் log பண்ண (shorthand trick)
const x = 10, y = 20;
console.log({ x, y }); // { x: 10, y: 20 }Common JavaScript Errors
| Error | காரணம் | Fix |
|---|---|---|
| ReferenceError: x is not defined | Declare பண்ணாத variable use | let/const/var-ல declare பண்ணு |
| TypeError: x is not a function | Non-function value-ஐ call பண்றது | Variable type check பண்ணு |
| TypeError: Cannot read properties of null | null/undefined-ன் property access | Access-க்கு முன்னாடி null check பண்ணு |
| RangeError: Maximum call stack exceeded | Infinite recursion | Recursion-ல base case add பண்ணு |
// Defensive debugging patterns
function process(data) {
if (!Array.isArray(data)) {
console.error("Expected array, got:", typeof data, data);
return;
}
}
// Optional chaining — deeply nested access-க்கு
const city = user?.address?.city ?? "Unknown";
// Structured error logging
try {
riskyOperation();
} catch (err) {
console.error("[riskyOperation] Failed:", {
message: err.message,
stack: err.stack
});
}முழுமையான உதாரணம்
Run this complete index.js program in the JavaScript console editor below. The earlier reference fragments may need a browser page or other surrounding setup.
const input = "20";
console.log("input type:", typeof input);
const amount = Number(input);
console.log("numeric type:", typeof amount);
console.log("total:", amount + 5);எதிர்பார்க்கும் முடிவைப் பாருங்கள்
input type: string numeric type: number total: 25
மாற்றி இயக்கிப் பாருங்கள்
Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.
Editor load ஆனதும் code-ஐ ஏற்றி Run அழுத்துங்கள்.
OneCompiler என்ற இலவச வெளிப்புற சேவை code-ஐ இயக்குகிறது. Run செய்யும் code அங்கு அனுப்பப்படும். தனிப்பட்ட தகவல்கள் அல்லது secret keys உள்ளிட வேண்டாம்.
சிறிய பயிற்சி
Practice challenge
Remove Number and predict the total.
விடை மற்றும் விளக்கம்
Without conversion, input + 5 produces "205". The type logs reveal why.
தவிர்க்க வேண்டிய தவறு: Do not treat the last line of a stack trace as the root cause automatically. Read the error message and find the relevant application frame.
அடுத்த பாடத்திற்குத் தயாரா?
- Explain the example in your own words.
- Complete the challenge before revealing its answer.
- Describe the common mistake and how to avoid it.