تصحيح JavaScript: تقنيات Chrome DevTools المتقدمة

التصحيح المتقدّم في Chrome DevTools

أتقِن أدوات تصحيح المتصفّح لتطوير فعّال.

أنواع نقاط التوقّف (Breakpoints)

// Line breakpoints - click line number

// Conditional breakpoints - right-click line
// Break when: user.id === 5

// Logpoints - log without pausing
console.log('User:', user.name)

// DOM breakpoints - right-click element
// Break on subtree modifications

نصائح الـ Console

// Table display
console.table([{name: 'John', age: 30}, {name: 'Jane', age: 25}]);

// Grouping logs
console.group('User Data');
console.log('Name:', user.name);
console.log('Email:', user.email);
console.groupEnd();

// Timing
console.time('fetch');
await fetch('/api/data');
console.timeEnd('fetch'); // fetch: 234ms

// Assert
console.assert(user.age > 0, 'Age must be positive');

تحليل الأداء (Profiling)

1. افتح تبويب Performance
2. اضغط Record
3. نفّذ الإجراءات
4. أوقف التسجيل
5. حلّل مخطط اللهب (flame chart)

كشف تسرّب الذاكرة

// Take heap snapshots
1. Open Memory tab
2. Take snapshot before action
3. Perform suspected leak action
4. Take another snapshot
5. Compare snapshots

// Look for:
- Detached DOM elements
- Growing arrays
- Event listeners not removed

خنق الشبكة (Network Throttling)

// Test slow connections
1. Network tab → Throttling dropdown
2. Choose "Slow 3G" or custom profile
3. Reload page and test

// Block specific requests
1. Network tab → right-click request
2. "Block request URL"

اختصارات مفيدة

Cmd/Ctrl + Shift + P  → Command palette
Cmd/Ctrl + P          → Open file
Cmd/Ctrl + Shift + F  → Search all files
Cmd/Ctrl + D          → Select next occurrence

إتقان DevTools يحسّن سرعة التصحيح بشكل كبير.