8.5: Debugging and Optimization with AI

Overview

Even AI-generated code needs debugging and optimization. This lesson teaches you how to leverage AI to find and fix bugs, improve performance, enhance accessibility, and conduct thorough code quality audits.

Debugging with AI

Step 1: Share Error Messages

When you encounter errors, provide complete context:

Debug Prompt Template:

I'm getting this error in my browser console:

Error message: [paste exact error]
Error location: [file name and line number if shown]

This is the code causing the issue:
[paste relevant code - HTML, CSS, or JavaScript]

Context:
- What I was trying to do: [describe action]
- What should happen: [expected behavior]
- What actually happens: [actual behavior]
- Browser: [Chrome/Firefox/Safari/Edge]
- Device: [Desktop/Mobile]

Please:
1. Explain what this error means in simple terms
2. Identify the root cause
3. Provide the fix with explanation
4. Suggest how to prevent this error in the future

Common JavaScript Errors

Error 1: "Cannot read property of undefined"

I'm getting this error:
"Uncaught TypeError: Cannot read properties of undefined (reading 'classList')"

Code:
const menuBtn = document.getElementById('menu-btn');
const mobileMenu = document.getElementById('mobile-menu');

menuBtn.addEventListener('click', () => {
  mobileMenu.classList.toggle('active');
});

What's wrong and how do I fix it?

Error 2: "... is not a function"

I'm getting this error:
"Uncaught TypeError: filterProjects is not a function"

Code:
[paste your code]

Please explain why this error occurs and how to fix it.

Optimization: Performance

Conducting a Performance Audit

Performance Audit Prompt:

Please audit my website for performance issues and suggest optimizations.

Website files:
- [List your HTML, CSS, JS files]
- Image count: [number]
- External resources: [fonts, libraries, etc.]

Current issues I've noticed:
- [Issue 1 if any]
- [Issue 2 if any]

Please analyze:

1. Loading Performance
   - Page load time factors
   - Render-blocking resources
   - Image optimization needs

2. CSS Optimization
   - Unused CSS
   - Inefficient selectors
   - Layout thrashing potential

3. JavaScript Performance
   - Expensive operations
   - DOM manipulation efficiency
   - Event listener optimization

4. Asset Optimization
   - Image file sizes
   - Font loading strategy
   - Resource compression

5. Prioritized Fixes
   - Most impactful optimizations first
   - Quick wins vs long-term improvements

Provide specific code changes for top 5 optimizations.

Image Optimization

Prompt:

My website loads slowly due to images. Help me optimize.

Current situation:
- [Number] images
- Formats: [JPG/PNG/etc.]
- Largest file: [size in MB]
- Total size: [total MB]

Please recommend:
1. Optimal image formats for each use case
2. Compression strategies
3. Responsive image techniques (srcset)
4. Lazy loading implementation
5. Tools for batch optimization

Provide code examples for implementation.

Optimization: Accessibility

Accessibility Audit

Accessibility Audit Prompt:

Please audit my website for accessibility issues (WCAG 2.1 AA compliance).

Code:
[paste HTML]

Focus areas:
1. Semantic HTML structure
2. Heading hierarchy
3. Alt text for images
4. Keyboard navigation
5. Color contrast
6. Form labels and error messages
7. ARIA labels where needed
8. Focus indicators

For each issue found, provide:
- What's wrong
- Why it matters
- How to fix it (with code)
- How to test the fix

Prioritize issues by impact on users.

Common Accessibility Fixes

Missing Alt Text:

My images don't have alt text. Help me add appropriate descriptions.

Images:
1. Hero background (decorative gradient)
2. Project screenshot (Todo app interface)
3. Profile photo
4. Technology icons (HTML, CSS, JS logos)

How should I write alt text for each?

Keyboard Navigation:

My mobile menu doesn't work with keyboard. Help me make it accessible.

Current code:
[paste code]

Requirements:
- Tab to navigate menu items
- Enter/Space to activate
- Escape to close menu
- Proper focus indicators

Code Quality Audits

Comprehensive Project Audit

Full Audit Prompt:

Analyze this web project and deliver a comprehensive audit report as markdown.

Project files:
[List or paste code]

Please evaluate and provide detailed feedback on:

1. HTML Quality
   - Semantic structure
   - Heading hierarchy
   - Validation issues
   - Best practices

2. CSS Quality
   - Organization and architecture
   - Naming conventions
   - Specificity issues
   - Browser compatibility
   - Responsive design implementation

3. JavaScript Quality
   - Code organization
   - Error handling
   - Performance
   - Best practices
   - ES6+ usage

4. Accessibility
   - WCAG compliance
   - Keyboard navigation
   - Screen reader support
   - Color contrast

5. Performance
   - Load time factors
   - Optimization opportunities
   - Asset management

6. Browser Compatibility
   - Cross-browser issues
   - Fallbacks needed

7. Security
   - Common vulnerabilities
   - Input validation
   - Best practices

8. Documentation
   - Code comments
   - README quality
   - Maintainability

For each section, provide:
- Current score (1-10)
- Issues found (prioritized)
- Specific fixes with code
- Resources to learn more

Don't hold back with critique. I want to improve this project to professional standards.

Taking AI Audits Seriously

Prioritizing Audit Findings

Critical (Fix immediately):

• Broken functionality
• Accessibility violations
• Security vulnerabilities
• Major performance issues

Important (Fix before submission):

• Code organization
• Best practices violations
• Minor performance issues
• Browser compatibility

Nice to Have (If time permits):

• Minor optimizations
• Advanced features
• Polish and refinements

Implementing Audit Fixes

Fix Implementation Prompt:

From your audit, I want to fix this issue:

Issue: [Describe the specific problem from audit]
Current code: [paste relevant code]

Please provide:
1. Explanation of why this is a problem
2. The complete fix with before/after comparison
3. Testing steps to verify the fix
4. How to prevent this issue in future code

Browser Compatibility

Testing Across Browsers

Compatibility Check Prompt:

Check my website for browser compatibility issues.

Features I'm using:
- [CSS Grid, Flexbox, etc.]
- [JavaScript ES6+, async/await, etc.]
- [Any modern APIs]

Target browsers:
- Chrome/Edge (last 2 versions)
- Firefox (last 2 versions)
- Safari (last 2 versions)

Please identify:
1. Features that need prefixes
2. Features that need polyfills
3. Features that need fallbacks
4. Recommended compatibility strategy

Provide code with proper fallbacks.

Practical Exercise: Audit Your Project

Task: Conduct a comprehensive AI audit of your current project

Steps:

1. Request Full Audit
   • Use the comprehensive audit prompt
   • Save results to docs/audit-report.md
2. Categorize Issues
   • Critical: Must fix
   • Important: Should fix
   • Nice to have: Could fix
3. Fix Critical Issues
   • Address each critical issue
   • Test after each fix
   • Document fixes in docs/fixes-log.md
4. Optimize Performance
   • Run performance audit
   • Implement top 3 optimizations
   • Measure improvements
5. Check Accessibility
   • Run accessibility audit
   • Fix all WCAG AA violations
   • Test with keyboard navigation

Deliverables:

• docs/audit-report.md - Full audit results
• docs/fixes-log.md - What you fixed and how
• Updated code with fixes
• Before/after performance comparison

Debugging Tips

DO:

✅ Provide complete error messages ✅ Include relevant code context ✅ Describe expected vs actual behavior ✅ Test fixes in multiple browsers ✅ Learn from each bug - ask "why" ✅ Document common issues you encounter

DON'T:

❌ Say "it doesn't work" - be specific ❌ Skip console error messages ❌ Fix without understanding ❌ Ignore warnings - they become errors ❌ Test only in one browser

Next Lesson Preview

In Lesson 8.6: Advanced AI Development Workflows, you'll learn:

• Converting static sites to Vue.js with AI
• Component architecture with AI assistance
• State management strategies
• Advanced feature implementation

Key Takeaways

Related Resources:

• Lesson 8.4: Building with AI Assistance
• Lesson 8.6: Advanced AI Development Workflows
• Browser DevTools Guide