21_debugging.js

function debugging() {
    /**
     * ========================================================
     * Console Logging
     * ========================================================
     * The console.log() function is a basic yet powerful debugging tool.
     * You can print variable values, objects, or diagnostic messages to the console.
     */
    const someValue = 42;
    console.log("Value:", someValue); // Output: Value: 42

    /**
     * ========================================================
     * Debugger Keyword
     * ========================================================
     * Inserting the 'debugger;' statement into your code will cause the JavaScript execution to pause
     * if the browser's developer tools are open. This allows you to inspect the current state.
     */
    function problematicFunction() {
        debugger;
        // Additional code that you may want to debug
    }

    /**
     * ========================================================
     * Stack Trace
     * ========================================================
     * When an error occurs or when manually triggered, JavaScript provides stack traces to help identify where the issue lies.
     */
    function a() {
        b();
    }

    function b() {
        c();
    }

    function c() {
        console.trace();
    }

    a(); // This will output the call stack in the console

    /**
     * ========================================================
     * Breakpoints
     * ========================================================
     * In browser development tools or IDEs like VSCode, you can set breakpoints directly in the source code.
     * This will pause execution at that line, enabling you to inspect variables, the call stack, and more.
     */

    /**
     * ========================================================
     * Step Debugging
     * ========================================================
     * Once a breakpoint is hit, you can 'step' through the code line-by-line.
     * This helps you understand the code flow and identify issues.
     */

    /**
     * ========================================================
     * Watch Expressions
     * ========================================================
     * Most debuggers allow you to define expressions that are evaluated whenever code execution stops.
     * This is helpful for tracking the values of variables or expressions over time.
     */

    /**
     * ========================================================
     * Network Requests
     * ========================================================
     * In browser dev tools, there's usually a 'Network' tab that lets you inspect all network activity.
     * This is indispensable for debugging issues related to API calls, file loads, and other server interactions.
     */

    /**
     * ========================================================
     * Performance Profiling
     * ========================================================
     * Dev tools offer performance profiling features to record and analyze runtime behavior.
     * This can help you identify bottlenecks, memory leaks, and other performance issues.
     */

    /**
     * ========================================================
     * Source Maps
     * ========================================================
     * Source maps map your bundled or minified code back to the original source code.
     * This is extremely helpful if you're using transpilers like Babel or bundlers like Webpack.
     */

    /**
     * ========================================================
     * Exception Handling
     * ========================================================
     * The try/catch/finally blocks allow you to handle exceptions gracefully and output custom debug information.
     */
    try {
        // Code that might fail
        JSON.parse("invalidJson");
    } catch (error) {
        console.error("Caught an error:", error);
    }

    /**
     * ========================================================
     * Conditional Breakpoints
     * ========================================================
     * These are breakpoints that only get triggered when a specific condition is met.
     * Useful for debugging issues that only occur in certain situations.
     */

    /**
     * ========================================================
     * Bonus: Log Levels
     * ========================================================
     * Apart from console.log, you can also use console.info, console.warn, and console.error
     * to log messages of different severity levels.
     */
    console.info("This is an info message");
    console.warn("This is a warning");
    console.error("This is an error");

    /**
     * ========================================================
     * Bonus: Debug Function
     * ========================================================
     * The console.debug() function works similarly to console.log,
     * but many browsers allow you to enable or disable debug-level messages for finer control.
     */
    console.debug("This is a debug message");

    /**
     * ========================================================
     * Not All Console Methods Are The Same
     * ========================================================
     * Different levels of console logging methods can display information differently in the console.
     * These can help to classify and filter messages during debugging.
     */
    console.info("This is an informational message.");
    console.warn("This is a warning message.");
    console.error("This is an error message.");

    /**
     * ========================================================
     * Timing Debugging
     * ========================================================
     * Using console.time() and console.timeEnd() allows you to measure the time taken for a particular operation.
     * This can be helpful in identifying bottlenecks or performance issues.
     */
    console.time("Example Timer");
    // Simulated operation
    for (let i = 0; i < 1000000; i++) {
        // Some operation
    }
    console.timeEnd("Example Timer");

    /**
     * ========================================================
     * Monitoring Events
     * ========================================================
     * The monitorEvents() function available in the browser console can be used to debug events.
     * You can specify which events on a particular DOM element you want to monitor.
     *
     * Example usage in browser console:
     * monitorEvents(window, ["click", "resize"]);
     */

    /**
     * ========================================================
     * Async Stack Traces
     * ========================================================
     * Modern development environments show asynchronous stack traces, allowing you to debug asynchronous code more efficiently.
     * This helps you understand the sequence of async operations that led to a specific state or error.
     */

    /**
     * ========================================================
     * Code Minification
     * ========================================================
     * Minified code is hard to debug. Source maps are essential to map the minified code back to the original source.
     * This is particularly useful for debugging production issues.
     */

    /**
     * ========================================================
     * Live Edit
     * ========================================================
     * Some IDEs and browser dev tools allow you to modify the code live during debugging.
     * This is very useful for testing quick changes without restarting the debugging session.
     */

    /**
     * ========================================================
     * Hidden Breakpoints and Debug Statements
     * ========================================================
     * Always ensure you haven't left any unintentional breakpoints, debugger statements, or console.log statements in your code.
     * These can have a performance impact and may cause unintended behavior.
     */

    /**
     * ========================================================
     * JSON.stringify Limitations
     * ========================================================
     * Be cautious when using JSON.stringify to debug objects with circular references, as it throws an error.
     * Consider using custom serialization or other methods to handle such cases.
     *
     * Example:
     * const circularObj = {};
     * circularObj.circular = circularObj;
     *
     * // This will throw an error
     * // JSON.stringify(circularObj);
     */
}

// Run the function to demonstrate debugging techniques.
debugging();