🔍 Debugging & Troubleshooting Master Guide

✅ The Solutions:

// Solution 1: WordPress functions.php
function add_cors_headers() {
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
    header("Access-Control-Allow-Headers: Content-Type, Authorization");
    
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
        status_header(200);
        exit();
    }
}
add_action('init', 'add_cors_headers');

// Solution 2: Use a proxy in package.json (development only)
{
  "proxy": "http://localhost:8000"
}

// Solution 3: Use a CORS plugin for WordPress
// Install: "WP CORS" or "WP REST API Controller"

✅ The Solutions:

// Solution 1: Optional Chaining (ES2020)
const title = post?.title?.rendered;

// Solution 2: Conditional Rendering
{post && post.title && (
    <h2>{post.title.rendered}</h2>
)}

// Solution 3: Default Props
const PostCard = ({ post = {} }) => {
    const { title = { rendered: 'Loading...' } } = post;
    return <h2>{title.rendered}</h2>;
};

// Solution 4: Loading State
if (loading) return <Spinner />;
if (!post) return <div>No post found</div>;
return <h2>{post.title.rendered}</h2>;

// Solution 5: Guard Clauses
const getTitle = (post) => {
    if (!post) return 'No post';
    if (!post.title) return 'Untitled';
    return post.title.rendered || 'Untitled';
};

✅ The Fix:

// ❌ BAD - Infinite Loop
useEffect(() => {
    setCount(count + 1); // This causes re-render, which triggers useEffect again!
});

// ✅ GOOD - With Dependency Array
useEffect(() => {
    setCount(count + 1);
}, []); // Empty array = runs once on mount

// ✅ GOOD - Conditional Update
useEffect(() => {
    if (shouldUpdate) {
        setCount(count + 1);
        setShouldUpdate(false);
    }
}, [shouldUpdate, count]);

// ✅ GOOD - Using Callback
useEffect(() => {
    setCount(prevCount => prevCount + 1);
}, [someDependency]); // Not dependent on count

✅ The Solutions:

// Solution 1: Fix Permalinks
// Go to: WordPress Admin → Settings → Permalinks
// Select "Post name" and Save (this regenerates .htaccess)

// Solution 2: Enable REST for Custom Post Types
register_post_type('products', [
    'public' => true,
    'show_in_rest' => true, // ← This is crucial!
    'rest_base' => 'products', // Optional: custom endpoint
    'supports' => ['title', 'editor', 'custom-fields']
]);

// Solution 3: Debug REST API
// Test these URLs in order:
// 1. yoursite.com/wp-json → Should show API index
// 2. yoursite.com/wp-json/wp/v2 → Should show endpoints
// 3. yoursite.com/wp-json/wp/v2/posts → Should show posts

// Solution 4: Check .htaccess
# BEGIN WordPress
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress

✅ The Solutions:

// For Objects - Create New Reference
// ❌ Wrong
const updateUser = () => {
    user.name = 'John';
    setUser(user); // Same reference!
};

// ✅ Correct - Spread Operator
const updateUser = () => {
    setUser({
        ...user,
        name: 'John'
    });
};

// ✅ Correct - Object.assign
const updateUser = () => {
    setUser(Object.assign({}, user, { name: 'John' }));
};

// For Arrays - Create New Array
// ❌ Wrong
const addItem = (item) => {
    items.push(item);
    setItems(items); // Same reference!
};

// ✅ Correct - Spread
const addItem = (item) => {
    setItems([...items, item]);
};

// ✅ Correct - Filter/Map (creates new array)
const removeItem = (id) => {
    setItems(items.filter(item => item.id !== id));
};

// For Nested Objects
// ✅ Deep Clone for Nested Updates
const updateNested = () => {
    setUser({
        ...user,
        address: {
            ...user.address,
            city: 'New York'
        }
    });
};

✅ The Solutions:

// Solution 1: Use Protocol-Relative URLs
const API_URL = '//mysite.com/wp-json/wp/v2';

// Solution 2: Force HTTPS in WordPress
// wp-config.php
define('FORCE_SSL_ADMIN', true);
if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false) {
    $_SERVER['HTTPS'] = 'on';
}

// Solution 3: Update WordPress URLs
// Settings → General → WordPress Address (URL): https://...
// Settings → General → Site Address (URL): https://...

// Solution 4: Environment-Based URLs
const API_URL = process.env.NODE_ENV === 'production'
    ? 'https://mysite.com/wp-json/wp/v2'
    : 'http://localhost:8000/wp-json/wp/v2';

// Solution 5: .htaccess Redirect
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]

🎯 Network Tab Pro Tips:

1. Filter by XHR/Fetch: See only API calls
2. Preserve Log: Keep requests when navigating
3. Throttling: Simulate slow connections
4. Copy as cURL: Right-click → Copy → Copy as cURL
5. Response Preview: See formatted JSON
6. Timing Tab: Analyze request performance
7. Initiator: See what triggered the request

🔍 React DevTools Techniques:

// 1. Finding Performance Issues
// Look for components highlighted in yellow/red during renders

// 2. Debugging Props
// Click component → View props → Edit values live

// 3. Hook Dependencies
// See which values trigger useEffect re-runs

// 4. Component Search
// Use the search bar with component names or prop values

// 5. Console Integration
// Select component → Type $r in console to access it
console.log($r.props); // Selected component's props
console.log($r.state); // Selected component's state

// 6. Debugging Re-renders
// Enable "Highlight updates when components render"
// Watch for unexpected flashing

// 7. Performance Profiling
// Start profiling → Interact with app → Stop → Analyze flamegraph

⚙️ Enable WordPress Debugging:

// wp-config.php - Development Settings
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', true);
define('SCRIPT_DEBUG', true);
define('SAVEQUERIES', true);

// Advanced Debugging
define('WP_DEBUG_LOG', '/path/to/custom/debug.log');

// REST API Debugging
add_filter('rest_pre_echo_response', function($result, $server, $request) {
    error_log('REST Request: ' . $request->get_route());
    error_log('REST Response: ' . json_encode($result));
    return $result;
}, 10, 3);

// Query Monitor Plugin Configuration
// Install Query Monitor plugin for visual debugging
// Shows: Database queries, PHP errors, HTTP requests, 
// Hooks & Actions, Block editor blocks, and more!

// Custom Debug Function
function debug_log($message) {
    if (WP_DEBUG === true) {
        if (is_array($message) || is_object($message)) {
            error_log(print_r($message, true));
        } else {
            error_log($message);
        }
    }
}

// Usage
debug_log('User ID: ' . get_current_user_id());
debug_log($_POST); // Log entire POST array

🎯 Advanced Console Techniques:

// 1. Styled Console Logs
console.log('%c Important Message! ', 
    'background: #222; color: #bada55; font-size: 16px; padding: 5px;');

// 2. Console Groups
console.group('API Call Details');
console.log('Endpoint:', endpoint);
console.log('Method:', method);
console.log('Headers:', headers);
console.groupEnd();

// 3. Console Table for Arrays/Objects
const users = [
    { name: 'John', age: 30, role: 'Admin' },
    { name: 'Jane', age: 25, role: 'User' }
];
console.table(users);

// 4. Performance Timing
console.time('API Call');
fetch('/api/posts').then(() => {
    console.timeEnd('API Call'); // API Call: 245.23ms
});

// 5. Stack Trace
console.trace('Where did this come from?');

// 6. Conditional Logging
console.assert(user.age >= 18, 'User is not an adult!', user);

// 7. Object Deep Inspection
console.dir(document.body, { depth: 2 });

// 8. Count Occurrences
function trackEvent(event) {
    console.count(event); // Button Click: 1, Button Click: 2, etc.
}

// 9. Memory Debugging
console.memory; // Check memory usage

// 10. Clear with Style
console.clear();
console.log('%c Console Cleared! ', 
    'background: red; color: white; font-size: 20px;');

🔧 VS Code Configuration:

// .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome for React",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Debug Node.js",
            "program": "${workspaceFolder}/server.js",
            "envFile": "${workspaceFolder}/.env"
        }
    ],
    "compounds": [
        {
            "name": "Full Stack",
            "configurations": ["Launch Chrome for React", "Debug Node.js"]
        }
    ]
}

// Debugging Shortcuts
// F5: Start Debugging
// F9: Toggle Breakpoint
// F10: Step Over
// F11: Step Into
// Shift+F11: Step Out
// Shift+F5: Stop Debugging

// Conditional Breakpoints (Right-click on line number)
// Expression: user.role === 'admin'
// Hit Count: Break after 5 hits
// Log Message: Log without stopping

// Debug Console Commands
// Watch expressions in real-time
// Evaluate expressions while paused
// Modify variables during execution

🛡️ Error Boundary Component:

// ErrorBoundary.js
import React from 'react';

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            hasError: false,
            error: null,
            errorInfo: null,
            errorCount: 0
        };
    }

    static getDerivedStateFromError(error) {
        // Update state so next render shows fallback UI
        return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
        // Log error to error reporting service
        console.error('Error Boundary Caught:', error, errorInfo);
        
        // Send to error tracking service
        if (window.Sentry) {
            window.Sentry.captureException(error, {
                contexts: { react: { componentStack: errorInfo.componentStack } }
            });
        }
        
        // Store error details
        this.setState({
            error,
            errorInfo,
            errorCount: this.state.errorCount + 1
        });
    }

    handleReset = () => {
        this.setState({
            hasError: false,
            error: null,
            errorInfo: null
        });
    };

    render() {
        if (this.state.hasError) {
            // Fallback UI
            return (
                <div style={{
                    padding: '20px',
                    background: '#fee',
                    border: '1px solid #fcc',
                    borderRadius: '5px',
                    margin: '20px'
                }}>
                    <h2>Oops! Something went wrong 😢</h2>
                    <details style={{ whiteSpace: 'pre-wrap', marginTop: '10px' }}>
                        <summary>Click for error details</summary>
                        <p>{this.state.error && this.state.error.toString()}</p>
                        <p>{this.state.errorInfo && this.state.errorInfo.componentStack}</p>
                    </details>
                    <button onClick={this.handleReset} style={{
                        marginTop: '10px',
                        padding: '10px 20px',
                        background: '#007bff',
                        color: 'white',
                        border: 'none',
                        borderRadius: '5px',
                        cursor: 'pointer'
                    }}>
                        Try Again
                    </button>
                </div>
            );
        }

        return this.props.children;
    }
}

// Usage
function App() {
    return (
        <ErrorBoundary>
            <Header />
            <ErrorBoundary>
                <MainContent />
            </ErrorBoundary>
            <Footer />
        </ErrorBoundary>
    );
}

// Custom Hook for Error Handling
function useErrorHandler() {
    const [error, setError] = React.useState(null);
    
    const resetError = () => setError(null);
    
    const captureError = React.useCallback((error) => {
        setError(error);
        console.error('Error captured:', error);
    }, []);
    
    React.useEffect(() => {
        if (error) throw error;
    }, [error]);
    
    return { captureError, resetError };
}

⚡ Performance Debugging Tools:

// 1. React Profiler API
import { Profiler } from 'react';

function onRenderCallback(id, phase, actualDuration) {
    console.log(`${id} (${phase}) took ${actualDuration}ms`);
}

<Profiler id="PostList" onRender={onRenderCallback}>
    <PostList posts={posts} />
</Profiler>

// 2. Performance Observer
const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        console.log('LCP:', entry.startTime);
    }
});
observer.observe({ entryTypes: ['largest-contentful-paint'] });

// 3. Why Did You Render
// npm install @welldone-software/why-did-you-render
import whyDidYouRender from '@welldone-software/why-did-you-render';

if (process.env.NODE_ENV === 'development') {
    whyDidYouRender(React, {
        trackAllPureComponents: true,
        logOwnerReasons: true
    });
}

// 4. Custom Performance Hook
function usePerformanceTimer(label) {
    React.useEffect(() => {
        performance.mark(`${label}-start`);
        
        return () => {
            performance.mark(`${label}-end`);
            performance.measure(
                label,
                `${label}-start`,
                `${label}-end`
            );
            const measure = performance.getEntriesByName(label)[0];
            console.log(`${label}: ${measure.duration}ms`);
        };
    }, [label]);
}