Debugging ופתרון בעיות מורכבות עם Claude Code

Debugging הוא אחד הדברים שClaude Code עושה הכי טוב — ואחד הדברים שמפתחים הכי מעריכים. Bug שרדפת שעות נפתר תוך דקות. השיעור הזה מלמד איך.

העיקרון: Claude Code צריך לראות את מה שאתה רואה

Debugging גרוע קורה כשנותנים לClaude Code מידע חלקי. הכלל: תן את הסימפטום המלא.

זה אומר:

• הודעת השגיאה המלאה (stack trace)
• מה ניסית לעשות
• מה ציפית שיקרה
• מה קרה בפועל
• מתי זה התחיל

Debugging PHP — דוגמה מעשית

נניח שהcontact form שובר את האתר. בלוג השגיאה:

PHP Fatal error: Call to undefined function jonny_send_notification()
in /wp-content/themes/jonny-theme/functions.php on line 347

בדרך כלל היינו פותחים functions.php ומחפשים. עם Claude Code:

> Getting this error when contact form is submitted:
  "PHP Fatal error: Call to undefined function jonny_send_notification()
  in functions.php on line 347"

  This started happening after I merged the new-email-feature branch.
  The contact form handler is around line 340 in functions.php.
  Find why the function is missing and fix it.

Claude Code יקרא את functions.php, ימצא שהפונקציה הוגדרה בקובץ אחר שנמחק במיגרציה, וייצור פתרון.

Debugging JavaScript — Console Errors

> Getting this console error on mobile:
  "TypeError: Cannot read properties of null (reading 'addEventListener')"
  The error points to main.js line 89.
  It only happens on mobile, not desktop.
  The element is #mobile-menu-toggle.
  Here is the relevant JS code: [paste the 20 lines around line 89]

Claude Code יזהה שהelément לא קיים בDOM בload (אולי conditional rendering בPHP), ויציע guard:

const toggle = document.getElementById('mobile-menu-toggle');
if (toggle) {
    toggle.addEventListener('click', ...);
}

Debugging WooCommerce / Plugin Conflicts

Plugin conflicts הם nightmare. Claude Code יכול לעזור לצמצם:

> After activating the new payment plugin, the checkout page shows a blank white screen.
  Error log shows: "Cannot redeclare wc_get_checkout_url()"
  List all places in our theme where we might be declaring functions
  that conflict with WooCommerce core, and suggest fixes.

שיטת "5 Whys" עם Claude Code

כשבאג נראה מסתורי, ביקשו מClaud Code לחפור לעומק:

> The page loads fine on first visit but shows a 500 error on refresh.
  Apache log: [paste error]
  Walk me through the 5 possible root causes, from most to least likely,
  and tell me how to verify each one.

Claude Code יבנה hypothesis tree ויעזור לצמצם שיטתית.

Performance Debugging

> The /blog/ page loads in 8 seconds according to Query Monitor.
  Top queries: [paste from Query Monitor]
  The main loop runs 3 custom WP_Query calls.
  Find what queries are slow and suggest optimizations (caching, indexes, etc.)

כלי עזר שמשדרגים Debugging

• Query Monitor — מציג כל שאילתת DB, PHP errors, hooks
• WP Debug Log — define('WP_DEBUG_LOG', true) ב-wp-config.php
• Chrome DevTools — network tab, console, performance
• /add-dir — הוסיפו תיקיות נוספות שרלוונטיות לבאג

✅ סיכום השיעור

• תן לClaude Code את הסימפטום המלא — stack trace, context, מתי התחיל
• ציין את הקבצים הרלוונטיים
• לבאגים מסתוריים — בקש hypothesis tree, לא פתרון מיידי
• Query Monitor + WP Debug Log = זוג מנצח

בשיעור האחרון — טיפים מתקדמים, MCP Servers וCustom Hooks שהופכים אתכם למשתמש power של Claude Code.