Debugging Tool

Firefox Developer Tools

Overview

Firefox Developer Tools is a set of web development tools in Mozilla Firefox browser. It excels in visual debugging of CSS Grid and Flexbox, with comprehensive JavaScript and network analysis capabilities.

Details

Firefox Developer Tools (DevTools) began development in 2009 as a successor to the Firebug addon and is now a comprehensive web developer toolkit integrated into Firefox browser. Based on Mozilla's open web advancement philosophy, it features design that emphasizes accurate Web standards implementation and cross-browser compatibility.

The greatest strength lies in excellent CSS-related debugging capabilities. Particularly for CSS Grid Inspector, Flexbox Inspector, and CSS Animations tools, the visual debugging of layout-related CSS features sometimes surpasses Chrome DevTools. The Grid Inspector visually displays grid lines, grid areas, and gaps, significantly supporting understanding of complex grid layouts. The Flexbox Inspector similarly provides intuitive display functionality for understanding flex item placement, direction, and flexibility.

JavaScript debugging features are also comprehensive, with the Debugger (formerly Sources) panel providing all necessary functions for modern web development including breakpoint setting, variable monitoring, call stack analysis, and source map support. Web Assembly (WASM) debugging support was implemented early, making it powerful for integration development with low-level languages.

The Network Monitor provides necessary functionality for network-related problem solving including detailed HTTP/HTTPS request analysis, security header verification, and CORS issue identification. The Response Editor feature allows editing and testing server responses.

Performance tools also have uniqueness, enabling detailed analysis of Gecko engine-specific optimization information and memory usage. The Accessibility Inspector is highly regarded in the industry and plays an important role in building WCAG-compliant websites.

Pros and Cons

Pros

• Excellent CSS Debugging: Outstanding visual debugging for Grid and Flexbox
• Unique Features: Many unique features not found in Chrome DevTools
• Web Standards Compliance: Accurate standard implementation through open web promotion
• Accessibility: Industry-leading accessibility tools
• Privacy Focus: Design prioritizing user data protection
• Open Source: Completely open source with high transparency
• Lightweight: Lighter operation than Chrome DevTools
• Rich Addons: Highly extensible addon ecosystem

Cons

• Market Share: Fewer users compared to Chrome DevTools
• Third-party Integration: Limited integration with development tools
• Documentation: Fewer tutorials compared to Chrome DevTools
• Enterprise Support: Less adoption in enterprise environments
• Update Frequency: Slightly slower pace of feature additions
• Learning Curve: Learning cost for developers familiar with Chrome DevTools
• Mobile Support: Limited mobile debugging features

Key Links

• Firefox Developer Tools Official
• Firefox DevTools Official Documentation
• Firefox DevTools GitHub
• CSS Grid Inspector
• Flexbox Inspector
• Firefox DevTools Tips

Usage Examples

Opening DevTools and Basic Operations

// Firefox DevTools launch methods
// 1. F12 key
// 2. Ctrl+Shift+I (Windows/Linux)
// 3. Cmd+Opt+I (Mac)
// 4. Menu → Web Development → Developer Tools
// 5. Right-click → Inspect Element

// Inspect specific element
// Right-click → Inspect Element
// Or Ctrl+Shift+C for inspector mode

Inspector - CSS Grid and Flexbox Visual Debugging

/* Advanced CSS Grid debugging */
.grid-container {
    display: grid;
    /* The following are visualized by Grid Inspector */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 200px auto;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    gap: 20px;
}

.grid-item {
    grid-area: main;
    /* Item placement verified by Grid Inspector */
}

/* Detailed Flexbox debugging */
.flex-container {
    display: flex;
    /* The following visualized by Flexbox Inspector */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.flex-item {
    /* Flex item properties are visualized */
    flex: 1 1 200px;
    align-self: flex-start;
}

/* Subgrid support (Firefox unique feature) */
.subgrid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.subgrid-item {
    display: grid;
    grid-template-columns: subgrid;  /* Verifiable with Firefox DevTools */
    grid-column: span 2;
}

Console - JavaScript Debugging and Execution

// Firefox Console unique features
console.log('Basic log output');
console.info('Information message');
console.warn('Warning message');
console.error('Error message');

// Detailed object display
const complexObject = {
    name: 'Firefox DevTools',
    features: ['CSS Grid', 'Flexbox', 'WASM'],
    stats: { users: 100000, rating: 4.5 }
};
console.dir(complexObject);  // Detailed object structure display
console.table([{name: 'John', age: 30}, {name: 'Jane', age: 25}]);

// Performance measurement
console.time('computation');
let result = 0;
for (let i = 0; i < 1000000; i++) {
    result += Math.sqrt(i);
}
console.timeEnd('computation');

// Grouping
console.group('User Operations');
console.log('Login attempt');
console.log('Data fetch');
console.groupEnd();

// Advanced Console features
console.trace();  // Stack trace
console.count('iteration');  // Counter
console.assert(result > 0, 'Result should be positive');

// DOM element selector (Firefox unique)
$('selector');   // document.querySelector
$$('selector');  // document.querySelectorAll
$0;             // Last selected element

Debugger - Advanced JavaScript Debugging

// Advanced debugging with Firefox Debugger
class UserManager {
    constructor() {
        this.users = [];
        this.currentUser = null;
    }
    
    async loadUsers() {
        // Breakpoint location
        try {
            const response = await fetch('/api/users');
            const userData = await response.json();
            
            // Debugger stops here
            this.users = userData.map(user => {
                return {
                    id: user.id,
                    name: user.name,
                    email: user.email,
                    isActive: user.status === 'active'
                };
            });
            
            return this.users;
        } catch (error) {
            // Error handling debugging
            console.error('Failed to load users:', error);
            throw error;
        }
    }
    
    findUser(criteria) {
        // Conditional breakpoint example
        // Condition: criteria.email.includes('@admin')
        return this.users.find(user => {
            if (criteria.id) return user.id === criteria.id;
            if (criteria.email) return user.email === criteria.email;
            if (criteria.name) return user.name.includes(criteria.name);
            return false;
        });
    }
    
    // Async processing debugging
    async authenticateUser(credentials) {
        const user = this.findUser({ email: credentials.email });
        
        if (!user) {
            throw new Error('User not found');
        }
        
        // Authentication process simulation
        const isValid = await this.validateCredentials(credentials);
        
        if (isValid) {
            this.currentUser = user;
            return user;
        } else {
            throw new Error('Invalid credentials');
        }
    }
    
    async validateCredentials(credentials) {
        // Authentication API call simulation
        return new Promise(resolve => {
            setTimeout(() => {
                // Logpoint can be set here
                resolve(credentials.password === 'correct');
            }, 100);
        });
    }
}

// Firefox Debugger operations example:
// 1. Set breakpoint (click line number)
// 2. Conditional breakpoint (right-click → Add conditional breakpoint)
// 3. Logpoint (right-click → Add logpoint)
// 4. Watch expressions (monitor variables in Watch panel)
// 5. Call Stack (check function call history)

const userManager = new UserManager();

Network Monitor - Detailed Network Analysis

// Communication monitored by Network Monitor
class APIClient {
    constructor(baseURL) {
        this.baseURL = baseURL;
        this.defaultHeaders = {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        };
    }
    
    async request(endpoint, options = {}) {
        const url = `${this.baseURL}${endpoint}`;
        
        // Detailed verification available in Network Monitor
        const config = {
            method: options.method || 'GET',
            headers: { ...this.defaultHeaders, ...options.headers },
            ...options
        };
        
        if (config.method !== 'GET' && options.data) {
            config.body = JSON.stringify(options.data);
        }
        
        try {
            const response = await fetch(url, config);
            
            // Response header verification
            console.log('Response headers:', [...response.headers.entries()]);
            
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            
            return await response.json();
        } catch (error) {
            console.error('Network request failed:', error);
            throw error;
        }
    }
    
    // HTTP method shortcuts
    async get(endpoint) {
        return this.request(endpoint);
    }
    
    async post(endpoint, data) {
        return this.request(endpoint, { method: 'POST', data });
    }
    
    async put(endpoint, data) {
        return this.request(endpoint, { method: 'PUT', data });
    }
    
    async delete(endpoint) {
        return this.request(endpoint, { method: 'DELETE' });
    }
}

// WebSocket communication monitoring
class WebSocketManager {
    constructor(url) {
        this.url = url;
        this.socket = null;
        this.messageQueue = [];
    }
    
    connect() {
        // WebSocket communication also monitored by Network Monitor
        this.socket = new WebSocket(this.url);
        
        this.socket.onopen = (event) => {
            console.log('WebSocket connected:', event);
            this.processMessageQueue();
        };
        
        this.socket.onmessage = (event) => {
            console.log('WebSocket message received:', event.data);
            this.handleMessage(JSON.parse(event.data));
        };
        
        this.socket.onerror = (error) => {
            console.error('WebSocket error:', error);
        };
        
        this.socket.onclose = (event) => {
            console.log('WebSocket closed:', event.code, event.reason);
        };
    }
    
    send(message) {
        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
            this.socket.send(JSON.stringify(message));
        } else {
            this.messageQueue.push(message);
        }
    }
    
    processMessageQueue() {
        while (this.messageQueue.length > 0) {
            const message = this.messageQueue.shift();
            this.send(message);
        }
    }
    
    handleMessage(data) {
        // Message processing logic
        switch (data.type) {
            case 'user_update':
                this.updateUser(data.payload);
                break;
            case 'notification':
                this.showNotification(data.payload);
                break;
            default:
                console.warn('Unknown message type:', data.type);
        }
    }
}

// Network Monitor verification items:
// 1. Request/Response Headers
// 2. Request/Response Body
// 3. Timing information
// 4. Security (HTTPS, CORS, etc.)
// 5. WebSocket Frame transmission/reception content

Performance - Performance Profiling

// Optimization example with Firefox Performance tools
class PerformanceTestCase {
    constructor() {
        this.data = [];
        this.cache = new Map();
    }
    
    // CPU-intensive processing (profiling target)
    generateLargeDataset(size) {
        console.time('data-generation');
        
        // Performance tools can check function-level execution time
        const data = [];
        for (let i = 0; i < size; i++) {
            data.push({
                id: i,
                value: Math.random() * 1000,
                category: ['A', 'B', 'C'][i % 3],
                timestamp: Date.now(),
                computed: this.expensiveComputation(i)
            });
        }
        
        console.timeEnd('data-generation');
        return data;
    }
    
    expensiveComputation(input) {
        // Heavy calculation processing
        let result = input;
        for (let i = 0; i < 1000; i++) {
            result = Math.sqrt(result + i) * Math.sin(i);
        }
        return result;
    }
    
    // DOM operation performance measurement
    renderData(container, data) {
        console.time('dom-rendering');
        
        // Problematic implementation example
        container.innerHTML = '';  // Delete all elements
        
        data.forEach(item => {
            const element = document.createElement('div');
            element.className = 'data-item';
            element.innerHTML = `
                <span class="id">${item.id}</span>
                <span class="value">${item.value.toFixed(2)}</span>
                <span class="category">${item.category}</span>
            `;
            container.appendChild(element);  // Individual addition (inefficient)
        });
        
        console.timeEnd('dom-rendering');
    }
    
    // Optimized DOM operations
    renderDataOptimized(container, data) {
        console.time('optimized-rendering');
        
        // Optimization using DocumentFragment
        const fragment = document.createDocumentFragment();
        
        data.forEach(item => {
            const element = document.createElement('div');
            element.className = 'data-item';
            
            // Avoid innerHTML for performance improvement
            const idSpan = document.createElement('span');
            idSpan.className = 'id';
            idSpan.textContent = item.id;
            
            const valueSpan = document.createElement('span');
            valueSpan.className = 'value';
            valueSpan.textContent = item.value.toFixed(2);
            
            const categorySpan = document.createElement('span');
            categorySpan.className = 'category';
            categorySpan.textContent = item.category;
            
            element.appendChild(idSpan);
            element.appendChild(valueSpan);
            element.appendChild(categorySpan);
            
            fragment.appendChild(element);
        });
        
        container.innerHTML = '';
        container.appendChild(fragment);  // Batch addition
        
        console.timeEnd('optimized-rendering');
    }
    
    // Memory usage monitoring
    monitorMemoryUsage() {
        if (performance.memory) {
            const memory = performance.memory;
            console.log('Memory usage:', {
                used: (memory.usedJSHeapSize / 1024 / 1024).toFixed(2) + ' MB',
                total: (memory.totalJSHeapSize / 1024 / 1024).toFixed(2) + ' MB',
                limit: (memory.jsHeapSizeLimit / 1024 / 1024).toFixed(2) + ' MB'
            });
        }
    }
}

// Performance tool measurement execution
const perfTest = new PerformanceTestCase();
const container = document.getElementById('data-container');

// Execute before starting Recording
// 1. Performance tab → Click Record button
// 2. Execute code below
// 3. Click Stop button

const testData = perfTest.generateLargeDataset(1000);
perfTest.renderData(container, testData);
perfTest.monitorMemoryUsage();

Storage Inspector - Storage and Application State

// Firefox Storage Inspector verification items
class StorageManager {
    constructor() {
        this.dbName = 'MyAppDB';
        this.dbVersion = 1;
        this.db = null;
    }
    
    // Local Storage operations (verified in Storage Inspector)
    saveToLocalStorage(key, data) {
        try {
            localStorage.setItem(key, JSON.stringify(data));
            console.log(`Saved to localStorage: ${key}`);
        } catch (error) {
            console.error('LocalStorage save failed:', error);
        }
    }
    
    loadFromLocalStorage(key) {
        try {
            const data = localStorage.getItem(key);
            return data ? JSON.parse(data) : null;
        } catch (error) {
            console.error('LocalStorage load failed:', error);
            return null;
        }
    }
    
    // Session Storage operations
    saveToSessionStorage(key, data) {
        sessionStorage.setItem(key, JSON.stringify(data));
    }
    
    // IndexedDB operations (detailed monitoring available)
    async initIndexedDB() {
        return new Promise((resolve, reject) => {
            const request = indexedDB.open(this.dbName, this.dbVersion);
            
            request.onerror = () => reject(request.error);
            request.onsuccess = () => {
                this.db = request.result;
                resolve(this.db);
            };
            
            request.onupgradeneeded = (event) => {
                const db = event.target.result;
                
                // Object store creation
                if (!db.objectStoreNames.contains('users')) {
                    const store = db.createObjectStore('users', { keyPath: 'id' });
                    store.createIndex('email', 'email', { unique: true });
                    store.createIndex('name', 'name', { unique: false });
                }
            };
        });
    }
    
    async saveToIndexedDB(storeName, data) {
        const transaction = this.db.transaction([storeName], 'readwrite');
        const store = transaction.objectStore(storeName);
        
        return new Promise((resolve, reject) => {
            const request = store.add(data);
            request.onsuccess = () => resolve(request.result);
            request.onerror = () => reject(request.error);
        });
    }
    
    // Cookie operations (verified in Storage Inspector)
    setCookie(name, value, days = 7) {
        const expires = new Date();
        expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
        
        document.cookie = `${name}=${value}; expires=${expires.toUTCString()}; path=/; SameSite=Strict`;
    }
    
    getCookie(name) {
        const cookies = document.cookie.split(';');
        for (let cookie of cookies) {
            const [cookieName, cookieValue] = cookie.trim().split('=');
            if (cookieName === name) {
                return cookieValue;
            }
        }
        return null;
    }
    
    // Cache API operations
    async cacheResources() {
        if ('caches' in window) {
            const cache = await caches.open('my-app-v1');
            
            const urlsToCache = [
                '/',
                '/css/app.css',
                '/js/app.js',
                '/images/logo.png'
            ];
            
            await cache.addAll(urlsToCache);
            console.log('Resources cached successfully');
        }
    }
}

// Storage Inspector verification items:
// 1. Local Storage
// 2. Session Storage  
// 3. IndexedDB
// 4. Cookies
// 5. Cache Storage
// 6. Extension Storage

const storage = new StorageManager();