|

Create or Edit festival Post

Title

Post name[used as URL tag]

Keywords

Price

Quota

<h3>Introduction</h3><p>Errors and bugs are inevitable in programming. What matters is how you handle and debug them. JavaScript provides built-in mechanisms for error handling (like try/catch/finally and throw) and debugging tools (such as developer console, breakpoints, and the debugger keyword). In this post, you will learn:</p><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>How JavaScript errors are represented</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>How to use try, catch, finally, and throw</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Common error types and the Error object properties</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Techniques and tools for debugging JavaScript code</li></ol><h2><br></h2><h2>1. JavaScript Errors & Exception Handling</h2><h3>1.1 Error Objects</h3><p>When an error occurs, JavaScript creates an <strong>Error object</strong> that has two main properties:</p><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>name: the type/name of error (e.g. TypeError, ReferenceError, etc.)</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>message: a descriptive message about what went wrong </li></ol><p>You can throw custom errors using the throw statement, passing any value you want (string, number, object).</p><h3><br></h3><h3>1.2 try / catch / finally</h3><p>You wrap code that might throw an error with try, and if an error happens, it is caught in catch. Optionally, finally runs code no matter what, whether error happened or not. </p><p><br></p><p><strong>Example:</strong></p><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain"><br></div><div class="ql-code-block" data-language="plain">try {</div><div class="ql-code-block" data-language="plain">  // code that might throw</div><div class="ql-code-block" data-language="plain">  if (somethingBad) {</div><div class="ql-code-block" data-language="plain">    throw "custom error";</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain">} catch (err) {</div><div class="ql-code-block" data-language="plain">  console.error("Error caught:", err);</div><div class="ql-code-block" data-language="plain">} finally {</div><div class="ql-code-block" data-language="plain">  console.log("Cleanup code always runs");</div><div class="ql-code-block" data-language="plain">}</div></div><h3><br></h3><h3>1.3 Throwing Your Own Errors</h3><p>You can <strong>throw</strong> errors deliberately to signal invalid states or unexpected inputs:</p><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain"><br></div><div class="ql-code-block" data-language="plain">if (userInput === "") {</div><div class="ql-code-block" data-language="plain">  throw "Input is empty";</div><div class="ql-code-block" data-language="plain">}</div></div><p>You can throw built-in Error objects too:</p><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain"><br></div><div class="ql-code-block" data-language="plain">throw new Error("Something went wrong");</div></div><p>Throwing custom or built-in errors gives you control over error reporting and handling. </p><p><br></p><h3>1.4 Common Error Types</h3><p>Some error names you’ll often see are:</p><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>SyntaxError — code has invalid syntax</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>ReferenceError — using a variable that hasn’t been declared</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>TypeError — performing an operation on incompatible type</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>RangeError — a number outside allowable range</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>URIError — error in URI handling (e.g. invalid percent-escape)</li></ol><h2><br></h2><h2>2. Debugging JavaScript</h2><h3>2.1 Why Debug?</h3><p>Debugging is the process of finding and fixing errors or unexpected behavior in code. In JavaScript, errors sometimes fail silently (no visible effect), which makes debugging critical. </p><p><br></p><h3>2.2 Using the Console & console.log()</h3><p>A simple but powerful debugging technique is using console.log() to output variable values or messages to the developer console.</p><p>You can also use console.error() for logging errors explicitly:</p><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain">console.error("This is an error message");</div></div><p>This helps highlight error messages in the console.</p><h3><br></h3><h3>2.3 Breakpoints & Developer Tools</h3><p>Modern browsers have built-in debugging tools. You can open them (often via F12) and:</p><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Set breakpoints in code so execution stops there</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Inspect variables, call stacks, and state at breakpoints</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Step line-by-line through code</li></ol><h3><br></h3><h3>2.4 The debugger Keyword</h3><p>You can insert a debugger; statement in your code to force a breakpoint at that location (if a debugger is open). If no debugger is active, it has no effect.</p><p><strong>Example:</strong></p><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain"><br></div><div class="ql-code-block" data-language="plain">let total = calculateSomething();</div><div class="ql-code-block" data-language="plain">debugger;</div><div class="ql-code-block" data-language="plain">console.log("After calculation", total);</div></div><p>When the code runs and reaches debugger;, execution will pause if dev tools are open. </p><p><br></p><h2>3. Putting It Together: Best Practices</h2><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Always wrap risky code (e.g. I/O, parsing, external operations) in try/catch</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Use throw for validating inputs or signaling failures</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Use finally for cleanup tasks (closing connections, releasing resources)</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Remove or disable console.log() statements in production code</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Use breakpoints and debugger for deeper inspection</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Use meaningful error messages to help debugging later</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Familiarize yourself with your browser’s dev tools (console, sources panel)</li></ol><p><br></p>

Refer to image as [image1] or [image2] or so on in the text.

Image 1

Image 2

Image 3

Image 4

I Agree with the Terms and Conditions

Type the number that you see in image.

Delete this post

Create or Edit festival Post

Member's Sites: