Chapter 8: Debugging JavaScript#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// Standard output
console.log('Debug message:', variable);
console.info('Information:', data);
console.warn('Warning:', issue);
console.error('Error:', error);

// Grouped logging
console.group('Processing Data');
console.log('Step 1: Load');
console.log('Step 2: Transform');
console.groupEnd();

// Table formatting
console.table([
    { id: 1, name: 'Item A' },
    { id: 2, name: 'Item B' }
]);

// Performance timing
console.time('operation');
performExpensiveTask();
console.timeEnd('operation');

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// Track XHR requests
const xhr = new XMLHttpRequest();
xhr.addEventListener('load', function() {
    console.log('Response received:', this.responseText);
});
xhr.addEventListener('error', function() {
    console.error('Request failed:', this.status);
});
xhr.open('GET', '/api/data');
xhr.send();

// Fetch API with detailed logging
async function fetchWithLogging(url) {
    console.log('Fetching:', url);
    try {
        const response = await fetch(url);
        console.log('Status:', response.status);
        console.log('Headers:', [...response.headers.entries()]);
        const data = await response.json();
        console.log('Data:', data);
        return data;
    } catch (error) {
        console.error('Fetch error:', error);
        throw error;
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// Node.js debugging from code
const inspector = require('inspector');

// Start inspector session
inspector.open(9229, '0.0.0.0', false);

// Trigger breakpoint programmatically
debugger;

// Close inspector
inspector.close();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// Conditional breakpoint
function processData(items) {
    for (let i = 0; i < items.length; i++) {
        if (items[i].id === 'debug-target') {
            debugger; // Execution pauses here
        }
        process(items[i]);
    }
}

// Exception breakpoints
process.on('uncaughtException', (error) => {
    console.error('Uncaught exception:', error.stack);
    debugger; // Pause on unhandled errors
});

process.on('unhandledRejection', (reason, promise) => {
    console.error('Unhandled rejection:', reason);
    debugger;
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// Debug module loading
console.log('Module paths:', module.paths);

// Trace require calls
const Module = require('module');
const originalRequire = Module.prototype.require;

Module.prototype.require = function(id) {
    console.log('Requiring:', id);
    return originalRequire.apply(this, arguments);
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

const fs = require('fs');
const inspector = require('inspector');
const session = new inspector.Session();

session.connect();

// Start CPU profiling
session.post('Profiler.enable', () => {
    session.post('Profiler.start', () => {
        // Code to profile
        performExpensiveOperation();

        // Stop and save profile
        session.post('Profiler.stop', (err, { profile }) => {
            fs.writeFileSync('/storage/sd/profile.cpuprofile',
                JSON.stringify(profile));
            session.disconnect();
        });
    });
});

1
2
3
4
5
6
7
8

// Heap snapshot
session.post('HeapProfiler.enable', () => {
    session.post('HeapProfiler.takeHeapSnapshot', null,
        (err, snapshot) => {
            fs.writeFileSync('/storage/sd/heap.heapsnapshot',
                JSON.stringify(snapshot));
    });
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

// Custom error classes
class NetworkError extends Error {
    constructor(message, statusCode) {
        super(message);
        this.name = 'NetworkError';
        this.statusCode = statusCode;
    }
}

class ValidationError extends Error {
    constructor(message, field) {
        super(message);
        this.name = 'ValidationError';
        this.field = field;
    }
}

// Usage
function validateData(data) {
    if (!data.id) {
        throw new ValidationError('ID is required', 'id');
    }
    if (typeof data.value !== 'number') {
        throw new ValidationError('Value must be number', 'value');
    }
}

try {
    validateData(inputData);
} catch (error) {
    if (error instanceof ValidationError) {
        console.error(`Validation failed on ${error.field}:`, error.message);
    } else {
        console.error('Unexpected error:', error);
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

// Catch synchronous errors
window.addEventListener('error', (event) => {
    console.error('Global error:', {
        message: event.message,
        filename: event.filename,
        lineno: event.lineno,
        colno: event.colno,
        error: event.error
    });

    // Log to file
    logErrorToFile(event.error);

    // Prevent default browser error handling
    event.preventDefault();
});

// Catch unhandled promise rejections
window.addEventListener('unhandledrejection', (event) => {
    console.error('Unhandled rejection:', event.reason);
    logErrorToFile(event.reason);
    event.preventDefault();
});

// Node.js error handlers
if (typeof process !== 'undefined') {
    process.on('uncaughtException', (error) => {
        console.error('Uncaught exception:', error);
        logErrorToFile(error);
    });

    process.on('unhandledRejection', (reason, promise) => {
        console.error('Unhandled rejection at:', promise, 'reason:', reason);
        logErrorToFile(reason);
    });
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

const fs = require('fs');

function logErrorToFile(error) {
    const timestamp = new Date().toISOString();
    const errorLog = {
        timestamp: timestamp,
        message: error.message,
        stack: error.stack,
        name: error.name
    };

    const logPath = '/storage/sd/errors.log';
    const logEntry = JSON.stringify(errorLog) + '\n';

    try {
        fs.appendFileSync(logPath, logEntry);
    } catch (writeError) {
        console.error('Failed to write error log:', writeError);
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

// Capture stack trace
function captureStack() {
    const stack = new Error().stack;
    console.log('Call stack:', stack);
    return stack;
}

// Parse stack trace
function parseStackTrace(error) {
    const stackLines = error.stack.split('\n');
    const parsed = stackLines.slice(1).map(line => {
        const match = line.match(/at\s+(.+?)\s+\((.+?):(\d+):(\d+)\)/);
        if (match) {
            return {
                function: match[1],
                file: match[2],
                line: parseInt(match[3]),
                column: parseInt(match[4])
            };
        }
        return { raw: line.trim() };
    });
    return parsed;
}

// Enhanced error reporting
function reportError(error) {
    const trace = parseStackTrace(error);
    console.error('Error details:', {
        message: error.message,
        type: error.name,
        stack: trace
    });
}

try {
    riskyOperation();
} catch (error) {
    reportError(error);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// Monitor frame rate
let lastTime = performance.now();
let frames = 0;

function measureFPS() {
    frames++;
    const currentTime = performance.now();

    if (currentTime >= lastTime + 1000) {
        const fps = Math.round((frames * 1000) / (currentTime - lastTime));
        console.log('FPS:', fps);
        frames = 0;
        lastTime = currentTime;
    }

    requestAnimationFrame(measureFPS);
}

requestAnimationFrame(measureFPS);

// Track long tasks
if (window.PerformanceObserver) {
    const observer = new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
            console.warn('Long task detected:', {
                duration: entry.duration,
                startTime: entry.startTime
            });
        }
    });

    observer.observe({ entryTypes: ['longtask'] });
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// Bad: Forces multiple reflows
function badLayoutCode() {
    const element = document.getElementById('box');
    for (let i = 0; i < 100; i++) {
        element.style.width = (element.offsetWidth + 1) + 'px'; // Read-write cycle
    }
}

// Good: Batch reads and writes
function goodLayoutCode() {
    const element = document.getElementById('box');
    const width = element.offsetWidth; // Single read
    for (let i = 0; i < 100; i++) {
        element.style.width = (width + i) + 'px'; // Multiple writes
    }
}

// Detect layout thrashing
let layoutCount = 0;
const originalOffsetWidth = Object.getOwnPropertyDescriptor(
    HTMLElement.prototype, 'offsetWidth'
);

Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
    get: function() {
        layoutCount++;
        if (layoutCount > 10) {
            console.warn('Potential layout thrashing detected');
            console.trace();
        }
        return originalOffsetWidth.get.call(this);
    }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// Mark timing points
performance.mark('operation-start');
processLargeDataset();
performance.mark('operation-end');

// Measure duration
performance.measure('operation', 'operation-start', 'operation-end');

// Get measurements
const measures = performance.getEntriesByType('measure');
measures.forEach(measure => {
    console.log(`${measure.name}: ${measure.duration}ms`);
});

// User Timing API
function profileFunction(fn, name) {
    return function(...args) {
        performance.mark(`${name}-start`);
        const result = fn.apply(this, args);
        performance.mark(`${name}-end`);
        performance.measure(name, `${name}-start`, `${name}-end`);

        const measure = performance.getEntriesByName(name)[0];
        console.log(`${name} took ${measure.duration}ms`);

        return result;
    };
}

// Usage
const processData = profileFunction(function(data) {
    return data.map(item => item * 2);
}, 'processData');

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

// Track object allocation
const objectRegistry = new WeakMap();
let allocationCount = 0;

function trackAllocation(obj, identifier) {
    allocationCount++;
    objectRegistry.set(obj, {
        id: identifier,
        timestamp: Date.now(),
        allocNumber: allocationCount
    });
}

// Monitor memory usage (Node.js)
if (typeof process !== 'undefined') {
    function logMemoryUsage() {
        const usage = process.memoryUsage();
        console.log('Memory usage:', {
            heapUsed: `${Math.round(usage.heapUsed / 1024 / 1024)}MB`,
            heapTotal: `${Math.round(usage.heapTotal / 1024 / 1024)}MB`,
            rss: `${Math.round(usage.rss / 1024 / 1024)}MB`,
            external: `${Math.round(usage.external / 1024 / 1024)}MB`
        });
    }

    setInterval(logMemoryUsage, 10000); // Log every 10 seconds
}

// Heap snapshot comparison (Node.js)
const v8 = require('v8');
const fs = require('fs');

function takeHeapSnapshot(filename) {
    const snapshot = v8.writeHeapSnapshot(filename);
    console.log('Heap snapshot written to:', snapshot);
}

// Take snapshots before and after operations
takeHeapSnapshot('/storage/sd/heap-before.heapsnapshot');
performOperation();
takeHeapSnapshot('/storage/sd/heap-after.heapsnapshot');

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// Bad: Event listener leak
function badEventListener() {
    const element = document.getElementById('button');
    element.addEventListener('click', function handler() {
        console.log('Clicked');
    });
    // Element removed but listener remains
    element.remove();
}

// Good: Clean up listeners
function goodEventListener() {
    const element = document.getElementById('button');
    const handler = function() {
        console.log('Clicked');
    };
    element.addEventListener('click', handler);

    // Clean up
    element.removeEventListener('click', handler);
    element.remove();
}

// Bad: Timer leak
function badTimer() {
    setInterval(() => {
        console.log('Running...');
    }, 1000);
    // Timer continues forever
}

// Good: Clean up timers
function goodTimer() {
    const timerId = setInterval(() => {
        console.log('Running...');
    }, 1000);

    // Clear when done
    setTimeout(() => {
        clearInterval(timerId);
    }, 10000);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

// Advanced element selection
function inspectElement(selector) {
    const element = document.querySelector(selector);

    if (!element) {
        console.error('Element not found:', selector);
        return;
    }

    console.group('Element Inspection:', selector);
    console.log('Tag:', element.tagName);
    console.log('ID:', element.id);
    console.log('Classes:', [...element.classList]);
    console.log('Attributes:', Array.from(element.attributes).map(attr =>
        ({ name: attr.name, value: attr.value })
    ));
    console.log('Computed Style:', window.getComputedStyle(element));
    console.log('Bounding Box:', element.getBoundingClientRect());
    console.log('Scroll Position:', {
        top: element.scrollTop,
        left: element.scrollLeft
    });
    console.groupEnd();
}

// Monitor DOM mutations
const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
        console.log('DOM mutation:', {
            type: mutation.type,
            target: mutation.target,
            addedNodes: mutation.addedNodes.length,
            removedNodes: mutation.removedNodes.length,
            attributeName: mutation.attributeName
        });
    });
});

observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeOldValue: true
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

// Log all events on element
function debugEvents(element) {
    const events = [
        'click', 'dblclick', 'mousedown', 'mouseup', 'mousemove',
        'touchstart', 'touchend', 'touchmove',
        'keydown', 'keyup', 'keypress',
        'focus', 'blur', 'change', 'input'
    ];

    events.forEach(eventType => {
        element.addEventListener(eventType, (e) => {
            console.log(`Event: ${eventType}`, {
                target: e.target,
                currentTarget: e.currentTarget,
                phase: e.eventPhase,
                bubbles: e.bubbles,
                cancelable: e.cancelable,
                defaultPrevented: e.defaultPrevented
            });
        }, true); // Capture phase
    });
}

// Track event propagation
function trackEventPropagation(selector, eventType) {
    const element = document.querySelector(selector);

    // Capture phase
    element.addEventListener(eventType, (e) => {
        console.log(`[CAPTURE] ${eventType} on`, e.currentTarget);
// ... (see full example below)
    element.addEventListener = function(type, listener, options) {
        if (!listeners.has(type)) {
            listeners.set(type, []);
        }
        listeners.get(type).push({ listener, options });
        original(type, listener, options);
    };

    return listeners;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

// Visualize element boundaries
function visualizeBoundaries(selector) {
    const elements = document.querySelectorAll(selector);

    elements.forEach((element, index) => {
        const rect = element.getBoundingClientRect();
        const overlay = document.createElement('div');

        overlay.style.cssText = `
            position: fixed;
            top: ${rect.top}px;
            left: ${rect.left}px;
            width: ${rect.width}px;
            height: ${rect.height}px;
            border: 2px solid red;
            pointer-events: none;
            z-index: 10000;
        `;

        const label = document.createElement('div');
        label.textContent = `${selector}[${index}]`;
        label.style.cssText = `
            background: red;
            color: white;
            padding: 2px 4px;
            font-size: 10px;
        `;

        overlay.appendChild(label);
        document.body.appendChild(overlay);
// ... (see full example below)
                    value: entry.value,
                    cumulative: cumulativeLayoutShift,
                    sources: entry.sources
                });
            }
        }
    });

    observer.observe({ entryTypes: ['layout-shift'] });
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

// Wrap XMLHttpRequest for debugging
const OriginalXHR = window.XMLHttpRequest;

window.XMLHttpRequest = function() {
    const xhr = new OriginalXHR();
    const id = Math.random().toString(36).substr(2, 9);

    const originalOpen = xhr.open;
    xhr.open = function(method, url, ...args) {
        console.log(`[XHR ${id}] Opening:`, method, url);
        this._debugInfo = { id, method, url, startTime: Date.now() };
        return originalOpen.apply(this, [method, url, ...args]);
    };

    xhr.addEventListener('loadstart', function() {
        console.log(`[XHR ${id}] Load started`);
    });

    xhr.addEventListener('load', function() {
        const duration = Date.now() - this._debugInfo.startTime;
        console.log(`[XHR ${id}] Completed:`, {
            status: this.status,
            statusText: this.statusText,
            duration: `${duration}ms`,
            responseSize: this.responseText.length
        });
    });

    xhr.addEventListener('error', function() {
        console.error(`[XHR ${id}] Failed:`, {
// ... (see full example below)
            duration: `${duration}ms`,
            headers: Object.fromEntries(response.headers.entries())
        });

        return response;
    } catch (error) {
        console.error(`[Fetch ${id}] Failed:`, error);
        throw error;
    }
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

// Test CORS configuration
async function testCORS(url) {
    console.log('Testing CORS for:', url);

    try {
        const response = await fetch(url, {
            method: 'OPTIONS',
            headers: {
                'Origin': window.location.origin,
                'Access-Control-Request-Method': 'GET'
            }
        });

        const corsHeaders = {
            'Access-Control-Allow-Origin': response.headers.get('Access-Control-Allow-Origin'),
            'Access-Control-Allow-Methods': response.headers.get('Access-Control-Allow-Methods'),
            'Access-Control-Allow-Headers': response.headers.get('Access-Control-Allow-Headers'),
            'Access-Control-Max-Age': response.headers.get('Access-Control-Max-Age')
        };

        console.log('CORS headers:', corsHeaders);

        if (corsHeaders['Access-Control-Allow-Origin'] === '*' ||
            corsHeaders['Access-Control-Allow-Origin'] === window.location.origin) {
            console.log('✓ CORS properly configured');
        } else {
            console.warn('✗ CORS may be blocked');
        }
    } catch (error) {
        console.error('CORS test failed:', error);
    }
}

// Disable CORS for development (BrightScript)
/*
config = {
    security_params: { websecurity: false }
    // Or use registry:
    // registry write html disable-web-security 1
}
*/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

// API debugging wrapper
class DebugAPI {
    constructor(baseURL) {
        this.baseURL = baseURL;
        this.requestLog = [];
    }

    async request(endpoint, options = {}) {
        const url = `${this.baseURL}${endpoint}`;
        const requestId = this.requestLog.length + 1;
        const startTime = Date.now();

        const logEntry = {
            id: requestId,
            url: url,
            method: options.method || 'GET',
            timestamp: new Date().toISOString(),
            headers: options.headers || {}
        };

        console.group(`API Request #${requestId}`);
        console.log('URL:', url);
        console.log('Method:', logEntry.method);
        console.log('Headers:', logEntry.headers);

        if (options.body) {
            console.log('Body:', options.body);
            logEntry.requestBody = options.body;
        }

// ... (see full example below)
        const response = await api.request('/data', {
            method: 'GET',
            headers: { 'Authorization': 'Bearer token123' }
        });
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('API call failed:', error);
    }
}