Vibe Coding

Debugging Strategies for Vibe Coding

Debugging is an essential skill for successful vibe coding. Even with AI assistance, code often doesn't work perfectly the first time. This section will equip you with effective strategies for identifying, diagnosing, and fixing issues in your AI-generated code.

Understanding Common Error Types

When working with AI-generated code, you'll encounter various types of errors. Understanding these error categories helps you approach debugging more systematically:

// Syntax error: missing closing parenthesis
function calculateTotal(price, quantity {\n    return price * quantity;\n}

// Runtime error: Cannot read property 'name' of undefined
function displayUserName(user) {\n    console.log(user.name);\n}\n\ndisplayUserName(); // Oops, we forgot to pass a user object

// Logical error: calculating average incorrectly
function calculateAverage(numbers) {\n    let sum = 0;\n    for (let i = 0; i < numbers.length; i++) {\n        sum += numbers[i];\n    }\n    return sum; // Forgot to divide by numbers.length\n}

// Integration error: taskManager expects different data structure
// Component 1: Form submission
function handleFormSubmit(event) {\n    event.preventDefault();\n    const taskData = {\n        name: document.getElementById('task-name').value,\n        description: document.getElementById('task-description').value\n    };\n    taskManager.addTask(taskData);\n}\n\n// Component 2: Task manager expects 'title', not 'name'\nfunction addTask(taskData) {\n    if (!taskData.title) { // This will fail because we used 'name' above\n        throw new Error('Task title is required');\n    }\n    // ...\n}

Systematic Debugging Process

Follow this step-by-step process to debug effectively:

1. Reproduce the Issue

The first step in debugging is consistently reproducing the problem. This helps you verify when it's fixed and understand the conditions that trigger it.

Techniques:

• Create a minimal test case that demonstrates the issue
• Document the exact steps to reproduce the problem
• Note any specific inputs or conditions that trigger the error

Example prompt for AI:

I'm having an issue with my task manager application. When I add a task with a due date and then edit the task to remove the due date, the application crashes. Here are the exact steps to reproduce:
1. Add a new task with title "Test" and due date "2023-12-31"
2. Click the edit button for this task
3. Clear the due date field and save
4. Error appears: "Cannot read properties of null (reading 'getTime')"

Here's the relevant code:
[Insert code here]

Can you help me identify and fix this issue?

2. Understand the Error

Before attempting to fix an error, make sure you understand what's causing it.

Techniques:

• Read error messages carefully (line numbers, error types, descriptions)
• Check the browser console for JavaScript errors
• Use console.log() to inspect variable values at different points
• Add comments to trace code execution

Example prompt for AI:

I'm getting this error in my JavaScript code: "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')".

I've added console.log statements and found that the error occurs on this line:
document.getElementById('task-form').addEventListener('submit', handleSubmit);

What might be causing this error, and how can I fix it?

3. Isolate the Problem

Narrow down the source of the problem to a specific section of code.

Techniques:

• Comment out sections of code to see if the error disappears
• Create a simplified version of your code that still shows the issue
• Test individual functions or components separately
• Use binary search: disable half your code, see if the error persists, then narrow down

Example prompt for AI:

I've isolated the problem to this function that calculates task statistics:

[Insert function code]

When I call this function with an empty tasks array, it works fine. When I call it with this sample data:

[Insert sample data]

It produces incorrect results for the completion rate. The expected completion rate should be 33% (1 out of 3 tasks completed), but it's showing 0%. Can you help me find the issue?

4. Fix and Verify

After identifying the issue, implement a fix and verify that it resolves the problem without introducing new issues.

Techniques:

• Make one change at a time
• Test after each change
• Verify the fix works for all cases, not just your test case
• Check that the fix doesn't break other functionality

Example prompt for AI:

I think I've fixed the issue with the task editing function. Here's my updated code:

[Insert updated code]

Does this look correct? Are there any edge cases I should be concerned about, or could this fix introduce any new issues?

Using AI Effectively for Debugging

AI tools can be powerful debugging assistants when used correctly. Here's how to leverage them effectively:

1. Provide Context

AI needs sufficient context to help with debugging. Include:

• The error message (exact text)
• The code that's causing the error
• Relevant surrounding code or dependencies
• What you expected to happen vs. what actually happened
• Any debugging steps you've already taken

Example prompt:

I'm building a habit tracker app using HTML, CSS, and JavaScript. I'm getting this error when trying to save a new habit:

"Uncaught TypeError: Cannot read properties of null (reading 'push')"

Here's the function that's causing the error:

function saveHabit() {
  const habitName = document.getElementById('habit-name').value;
  const habitFrequency = document.getElementById('habit-frequency').value;

  const newHabit = {
    id: Date.now(),
    name: habitName,
    frequency: habitFrequency,
    logs: []
  };

  habits.push(newHabit);
  localStorage.setItem('habits', JSON.stringify(habits));
  renderHabits();
}

I expected this to add a new habit to the habits array and save it to localStorage, but it's failing on the habits.push line. I've checked, and the habits variable should be initialized at the top of my script like this:

let habits = JSON.parse(localStorage.getItem('habits')) || [];

What might be causing this issue?

2. Ask Specific Questions

Frame your questions to get the most helpful responses:

Instead of:
"My code doesn't work. Help me fix it."

Try:
"My function to calculate task completion percentage returns NaN when there are no completed tasks. How can I modify this function to return 0% when no tasks are completed?"

3. Request Step-by-Step Explanations

When you don't understand why a bug is occurring, ask the AI to explain the issue step by step:

Example prompt:

I don't understand why this loop isn't working correctly. Can you walk through the execution of this code step by step and explain where it's going wrong?

function findDuplicates(array) {
  const duplicates = [];
  for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < array.length; j++) {
      if (array[i] === array[j] && i !== j) {
        duplicates.push(array[i]);
      }
    }
  }
  return duplicates;
}

// When I call this with [1, 2, 3, 2, 4, 3], it returns [2, 3, 2, 3] instead of [2, 3]

4. Use AI for Code Review

AI can help identify potential issues before they become bugs:

Example prompt:

Can you review this function for potential bugs, edge cases, or performance issues?

function filterAndSortTasks(tasks, filterStatus, sortBy) {
  let filteredTasks = tasks;

  if (filterStatus !== 'all') {
    const isCompleted = filterStatus === 'completed';
    filteredTasks = tasks.filter(task => task.completed === isCompleted);
  }

  if (sortBy === 'dueDate') {
    filteredTasks.sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate));
  } else if (sortBy === 'priority') {
    filteredTasks.sort((a, b) => b.priority - a.priority);
  }

  return filteredTasks;
}

Common Debugging Scenarios and Solutions

Here are some common debugging scenarios you might encounter in vibe coding projects, along with solutions:

Scenario 1: Data Not Persisting in localStorage

Problem: You're using localStorage to save data, but it's not being saved or retrieved correctly.

Common causes:

• Forgetting to stringify objects before saving
• Forgetting to parse JSON when retrieving
• Using incorrect key names
• localStorage quota exceeded
• Private browsing mode (which may limit localStorage)

Solution example:

// Incorrect
localStorage.setItem('tasks', tasks); // Trying to store object directly

// Correct
localStorage.setItem('tasks', JSON.stringify(tasks)); // Convert to string first

// Incorrect
const tasks = localStorage.getItem('tasks'); // This returns a string

// Correct
const tasks = JSON.parse(localStorage.getItem('tasks')) || []; // Parse and provide default

AI prompt for help:

My task manager app isn't saving tasks between page refreshes. Here's my code for saving and loading tasks:

// Save tasks
function saveTasks() {
  localStorage.setItem('tasks', tasks);
}

// Load tasks
function loadTasks() {
  return localStorage.getItem('tasks') || [];
}

What's wrong with this code, and how can I fix it?

Scenario 2: Event Listeners Not Working

Problem: You've added event listeners, but they don't trigger when the event occurs.

Common causes:

• Element doesn't exist when the listener is added
• Incorrect element selector
• Event bubbling/propagation issues
• JavaScript errors preventing execution

Solution example:

// Incorrect - Element might not exist yet if script runs before DOM is loaded
document.getElementById('task-form').addEventListener('click', handleClick);

// Correct - Wait for DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
  const taskForm = document.getElementById('task-form');
  if (taskForm) { // Check if element exists
    taskForm.addEventListener('click', handleClick);
  } else {
    console.error('Element #task-form not found');
  }
});

AI prompt for help:

I've added a click event listener to my "Add Task" button, but nothing happens when I click it. Here's my code:

const addButton = document.getElementById('add-task-button');
addButton.addEventListener('click', function() {
  console.log('Button clicked');
  addNewTask();
});

function addNewTask() {
  // Task creation logic
  console.log('Adding new task');
}

I've checked the console and there are no error messages. What might be causing this issue?

Scenario 3: Asynchronous Code Problems

Problem: Code that depends on asynchronous operations (like API calls) runs before the operation completes.

Common causes:

• Not using async/await or .then() properly
• Missing error handling for promises
• Race conditions
• Not understanding the asynchronous nature of certain operations

Solution example:

// Incorrect - Trying to use result immediately
let userData;
fetch('https://api.example.com/user')
  .then(response => response.json())
  .then(data => {
    userData = data;
  });
console.log(userData); // Will be undefined

// Correct - Using async/await
async function getUserData() {
  try {
    const response = await fetch('https://api.example.com/user');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const userData = await response.json();
    console.log(userData); // Will have the data
    return userData;
  } catch (error) {
    console.error('Error fetching user data:', error);
  }
}

// Or with promises
function getUserData() {
  return fetch('https://api.example.com/user')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(userData => {
      console.log(userData);
      return userData;
    })
    .catch(error => {
      console.error('Error fetching user data:', error);
    });
}

AI prompt for help:

I'm trying to fetch weather data from an API and display it, but my display function runs before the data is received. Here's my code:

let weatherData;

function getWeatherData() {
  fetch('https://api.example.com/weather?city=London')
    .then(response => response.json())
    .then(data => {
      weatherData = data;
    });
}

function displayWeather() {
  console.log(weatherData); // This is undefined
  document.getElementById('temperature').textContent = weatherData.temperature;
}

getWeatherData();
displayWeather();

How can I fix this so displayWeather() only runs after the data is received?

Scenario 4: CSS Styling Issues

Problem: Elements don't appear as expected, or responsive design doesn't work properly.

Common causes:

• Specificity issues (some CSS rules overriding others)
• Box model misunderstandings (margin, padding, border)
• Flexbox or Grid layout issues
• Media query problems
• Browser compatibility issues

Solution approach:

1. Use browser developer tools to inspect the element
2. Check which CSS rules are being applied (and which are being overridden)
3. Test with simplified CSS to isolate the issue
4. Use browser device emulation to test responsive designs

Debugging Strategy with AI

Example prompt:

When I click the "Complete" button for a habit, the UI shows it as completed, but after refreshing the page, it shows as incomplete again. Here's my code for saving completion data:

[Insert relevant code here]

How can I fix this to properly persist the completion status?