console المتقدم

// أساسي
console.log('رسالة');

// مع تنسيق
console.log('%cنص ملون', 'color: red; font-size: 20px');

// جدول
console.table([{ name: 'أحمد', age: 25 }]);

// مجموعة
console.group('مجموعة');
console.log('داخل المجموعة');
console.groupEnd();

// وقت
console.time('عملية');
// ...كود
console.timeEnd('عملية');

Breakpoints

// في الكود
debugger;  // يوقف هنا

// أو من DevTools:
// Sources > اضغط على رقم السطر

// Conditional breakpoint
// كليك يمين > Add conditional breakpoint
// x > 10

Watch Expressions

في DevTools > Sources > Watch. أضف متغيرات أو تعبيرات لمراقبتها أثناء التنفيذ.

Network Debugging

// اعتراض الطلبات
fetch('/api/data')
  .then(r => r.json())
  .then(data => console.log(data))
  .catch(err => console.error('فشل:', err));

Error Stack Trace

try {
  riskyOperation();
} catch (error) {
  console.error('Error:', error.message);
  console.error('Stack:', error.stack);
}

الخلاصة

DevTools أقوى أداة للـ debugging. تعلم keyboard shortcuts لتسريع عملك.