دليل React Native DevTools 2026: تنقيح التطبيقات بعد اختفاء Flipper

آخر تحديث: 20 سبتمبر 2026

تُعرَّف React Native DevTools بأنها مُنقّح رسمي مدمج في React Native منذ الإصدار 0.76، مبني على بروتوكول Chrome DevTools، ويسمح لك بفحص جافاسكربت وشبكة وذاكرة تطبيقك مباشرة من متصفح Chrome أو Edge دون الحاجة إلى Flipper. بعبارة أخرى: نفس تجربة تنقيح صفحة ويب، لكن الهدف هذه المرة هو جهاز أو محاكي يشغّل تطبيقك عبر محرك Hermes. في هذا الدليل سأشرح (كمطوّرة قادمة من الويب) ما الذي تغيّر فعلاً، وأين تشابه Chrome DevTools التقليدية وأين ينفصل عنها.

• React Native DevTools هي البديل الرسمي لـ Flipper بدءاً من React Native 0.76، وأصبحت الافتراضية في 0.79+ و Expo SDK 52 وما بعده.
• تعمل عبر بروتوكول Chrome DevTools (CDP) وتتصل بمحرك Hermes مباشرة، لذلك لا تحتاج إلى تثبيت أي تطبيق سطح مكتب إضافي.
• تدعم نقاط التوقف الحقيقية، ومفتّش React المكوّنات، ومنقّح الشبكة الجديد (RN 0.81+)، ولوحة الأداء بصيغة Performance panel.
• Flipper لم يعد مدعوماً من فريق Meta منذ منتصف 2024، وإضافاته الرسمية أُزيلت من قوالب المشاريع في 0.74.
• افتح المنقّح بضغطة j في نافذة Metro، أو من قائمة Dev Menu داخل التطبيق (Ctrl/Cmd + M).
• لأدوات إضافية مثل تخزين الحالة أو استعلامات SQLite، ما تزال Reactotron خياراً مكمّلاً وليس منافساً.

ما هي React Native DevTools؟

عندما بدأتُ العمل على React Native قادمةً من عالم React على الويب، كان أول سؤال يخطر لي هو: «أين F12؟». الجواب الحديث في 2026 هو React Native DevTools، وهي واجهة تنقيح مبنية بالكامل على Chrome DevTools Frontend وتتحدث مع تطبيقك عبر Chrome DevTools Protocol. الفكرة أن Hermes (المحرك الافتراضي لجافاسكربت في React Native منذ 0.70) يُصدِر نقاط اتصال CDP، ثم يقوم Metro بدور الوسيط بين المتصفح وجهازك.

هذه العمارة تعني أنك تحصل على واجهة مألوفة تماماً لأي مطوّر ويب: علامات تبويب Console وSources وMemory، مع إضافات خاصة بـ React مثل Components وProfiler. الفرق الجوهري أنك لا تُنقّح متصفحاً، بل عملية جافاسكربت تعمل داخل تطبيق أصلي، لذلك تجد سياقاً واحداً فقط في Sources (سياق تطبيقك)، بينما على الويب تجد iframes وservice workers.

وهذه ليست ترقية تجميلية فحسب. صراحةً، وحدة Debugger في Hermes أعيدت كتابتها لتتحدث CDP مباشرة، ما يعني أن نقاط التوقف الشرطية (conditional breakpoints) و pause on exception و source maps تعمل الآن بشكل موثوق، وهي مشاكل تاريخية عانى منها كل من استخدم «Debug JS Remotely» القديم.

لماذا اختفى Flipper في 2026؟

Flipper كان أداة سطح مكتب من Meta تعتمد على بروتوكول WebSocket خاص، وتقدّم إضافات (plugins) لفحص الشبكة، الـ Layout، الـ AsyncStorage، وغيرها. في مايو 2024 أعلن فريق React Native رسمياً أن Flipper لم يعد جزءاً من قوالب المشاريع الجديدة، ومنذ الإصدار 0.74 أُزيلت التبعيات ذات الصلة من ملفات package.json وقوالب أندرويد/iOS. بحلول 2026 لا يوجد إصدار Flipper يعمل مع البنية الجديدة (New Architecture) بشكل مستقر، لأن الفريق قرّر تركيز جهود التنقيح على أدوات مبنية على معايير مفتوحة.

الأسباب التي أوردها الفريق واضحة: صعوبة صيانة إضافات Flipper مع كل ترقية، تعقيد التوافق مع Fabric و TurboModules، وتكلفة تجربة المستخدم (تحميل تطبيق منفصل، وتوصيلات USB متقلّبة). في المقابل، React Native DevTools تعتمد على Chromium و Metro، وهي أدوات موجودة بالفعل في كل تدفّق عمل React Native.

لأن السؤال يتكرّر: نعم، Flipper كمشروع مفتوح المصدر مستمر تقنياً في مستودع facebook/flipper، لكن دون فريق مخصّص، وبإضافات تعتبر «legacy». من الناحية العملية، أيّ مشروع يبدأ اليوم يجب أن يعتمد React Native DevTools افتراضياً.

كيف تفعّل React Native DevTools؟

لا تحتاج إلى تثبيت أي حزمة إضافية. كل مشروع React Native ≥ 0.76 (أو Expo SDK 52+) يأتي بها جاهزة. الخطوات على الجهاز أو المحاكي:

1. شغّل خادم Metro كالمعتاد: npx expo start أو npx react-native start.
2. افتح تطبيقك على المحاكي أو الجهاز الفعلي.
3. افتح Dev Menu بضغطة Cmd + M على أندرويد أو Cmd + D على iOS، أو ببساطة اضغط j داخل نافذة Metro في الطرفية.
4. اختر Open DevTools. ستفتح نافذة Chromium مضمّنة بواجهة DevTools.

مثال على الاستخدام السريع من الطرفية:

$ npx expo start
› Metro waiting on exp+myapp://expo-development-client/?url=...
› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu

يمكنك أيضاً كتابة سطر debugger; داخل شيفرتك، وسيتوقّف التنفيذ تلقائياً في Sources tab إذا كانت DevTools مفتوحة، تماماً كما في الويب:

function useUserProfile(userId: string) {
  const [profile, setProfile] = useState<Profile | null>(null);

  useEffect(() => {
    (async () => {
      const res = await fetch(`/api/users/${userId}`);
      const data = await res.json();
      debugger; // ← سيتوقّف هنا داخل React Native DevTools
      setProfile(data);
    })();
  }, [userId]);

  return profile;
}

أهم علامات التبويب داخل المنقّح

الواجهة تبدو مطابقة لـ Chrome DevTools، لكن ليست كل التبويبات نشطة. إليك الجدول المختصر:

التبويب	مدعوم في RN DevTools	مدعوم في Chrome على الويب
Console	نعم، بشكل كامل	نعم
Sources / نقاط التوقف	نعم، يقرأ source maps من Metro	نعم
Network	نعم منذ RN 0.81	نعم
Performance	نعم، يستخدم Hermes sampling profiler	نعم
Memory (heap snapshots)	نعم	نعم
Components (React)	نعم، مدمج	يتطلّب إضافة React DevTools
Elements (DOM)	لا، لا يوجد DOM	نعم
Application (Cookies/LocalStorage)	لا	نعم

الغياب الأبرز هو Elements: React Native لا يستخدم DOM، بل يرسم عناصر أصلية عبر Fabric. لفحص شجرة المكوّنات، استخدم Components بدلاً منها؛ سنعود إلى هذا في قسم React DevTools.

علامة Console وميزة $_

Console تدعم كل ما تعرفه: console.log، console.table، console.time، إضافة إلى المتغيّرات السحرية $0 (آخر عنصر React اختير في Components) و$_ (نتيجة آخر تعبير). هذا يجعل الاستكشاف التفاعلي أقرب لأسلوب المتصفح.

كيف تفحص طلبات الشبكة في React Native؟

أحد أطول شكاوى مجتمع React Native تاريخياً كان غياب فاحص شبكة موثوق. Flipper وفّره عبر إضافة، و Reactotron وفّر بديلاً، لكن كلا الحلّين كان يعترض XMLHttpRequest يدوياً. منذ React Native 0.81 (الصادر في أغسطس 2025)، أصبح فاحص الشبكة جزءاً أصلياً من DevTools ويعمل على مستوى الطبقة الأصلية: أي أنه يرصد طلبات fetch، وطلبات مكتبات مثل axios، وحتى تنزيلات الصور عبر <Image>.

الاستخدام مطابق للويب: افتح تبويب Network، ثم أعد تحميل الشاشة. سترى الطلبات مع الطريقة، الحجم، الزمن، ورؤوس الطلب والاستجابة. من واقع تجربتي في مشروعي الأخير، هذا كان اللحظة التي شعرت فيها فعلاً أن الفجوة بين تنقيح الويب وتنقيح الموبايل قد أُغلقت.

// طلب اختباري بسيط لرصد كيف يظهر في Network
async function fetchPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5', {
    headers: { 'x-client': 'rn-devtools-demo' },
  });
  const posts = await res.json();
  console.table(posts.map(p => ({ id: p.id, title: p.title })));
  return posts;
}

تنقيح الأداء والذاكرة عبر Performance panel

هذا الجانب هو الأكثر تأثيراً على تطبيق فعلي. تبويب Performance في React Native DevTools يستخدم sampling profiler المدمج في Hermes ويولّد نفس تنسيق flamegraph الذي تعرفه من الويب. الخطوات:

1. افتح Performance وابدأ التسجيل بضغطة زرّ الدائرة.
2. نفّذ السيناريو الذي تريد قياسه داخل التطبيق (فتح شاشة، تمرير قائمة، تنفيذ animation).
3. أوقف التسجيل. سترى flamegraph لكل الإطارات، مع تصنيف الوقت بين JS، commit، layout، paint.

يمكنك أيضاً استيراد التسجيل داخل أدوات أخرى مثل speedscope، أو رفعه في CI لتتبّع التراجعات. للأداء المتعلّق بالرسومات، هذه الأداة تكمّل ولا تحلّ محلّ Perfetto (على أندرويد) أو Instruments (على iOS)، اللذين يفحصان الطبقة الأصلية.

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

Memory tab يوفّر heap snapshots تعمل تماماً كنسخة الويب. الحيلة العملية: التقط snapshot قبل الدخول لشاشة معيّنة، ثم snapshot بعد الخروج منها. المقارنة تكشف المكوّنات التي بقيت في الذاكرة رغم إزالتها من الشجرة، وهو سبب شائع لتسريبات closure في listeners غير مُنظَّفة داخل useEffect.

React DevTools داخل النافذة نفسها

على الويب، React DevTools إضافة منفصلة تحمّلها من متجر Chrome. في React Native DevTools 2026، هي مدمجة كلياً وتفتح بتبويبين: Components وProfiler. Components يعرض شجرة المكوّنات مع props و state و hooks الحالية (بما فيها hooks المخصّصة)، ويتيح تعديل القيم مباشرة لملاحظة أثرها فورياً.

Profiler يسجّل جلسات render ويوضّح المكوّنات التي أُعيد رسمها وسببها (تغيّر props، تغيّر state، أو context). إن كنتَ تعمل مع دليل Reanimated 4 لرسوم CSS المتحركة، ستجد أن كثيراً من الأداء يعتمد على تجنّب re-renders غير الضرورية، و Profiler هو أداتك الأولى لقياس ذلك.

// مثال: مكوّن يعاني من re-renders زائدة
const ExpensiveList = ({ items, filter }: Props) => {
  // بدون useMemo، سيُعاد الحساب في كل render حتى لو لم يتغيّر filter
  const visible = items.filter(i => i.label.includes(filter));

  return (
    <FlashList
      data={visible}
      renderItem={({ item }) => <Row item={item} />}
      estimatedItemSize={56}
    />
  );
};

// الإصلاح الذي يظهر أثره فوراً في Profiler:
const visible = useMemo(
  () => items.filter(i => i.label.includes(filter)),
  [items, filter]
);

مقارنة صريحة مع Chrome DevTools على الويب

لأنني قضيت سنوات في تنقيح تطبيقات ويب، أعرف بالضبط ما الذي «يمشي» تلقائياً من عاداتي القديمة وما الذي يتطلّب تعديل الذاكرة العضلية. إليك الجدول العملي:

الميزة	Chrome DevTools (ويب)	React Native DevTools (موبايل)
فحص DOM	عبر Elements	غير موجود، استخدم Components
تعديل CSS مباشرة	نعم في Styles	لا، عدّل props في Components
إعادة التحميل السريعة	Cmd+R على الصفحة	Fast Refresh مفعّل افتراضياً
نقاط التوقف الشرطية	نعم	نعم (منذ 0.76)
Network throttling	نعم من Network tab	لا، استخدم أدوات النظام أو Charles Proxy
Lighthouse audits	نعم	لا، استخدم Flashlight أو Perfetto

الخلاصة: 80% من عاداتك ستنتقل مباشرة، لكن كل ما يتعلق بطبقة العرض الأصلية (تخطيط، ألوان، أنيميشن على GPU) يحتاج أدوات النظام. هذا ينطبق أيضاً على تجربة التنقل: إذا كنت تعمل مع دليل Expo Router v7 للتوجيه بالملفات، فإن معالجة الروابط العميقة لا تظهر في Network بل عبر سجلات Metro.

بدائل ومكمّلات: Reactotron وسجلات Metro

رغم قوّة DevTools، هناك سيناريوهات يبقى فيها لبديل قيمة:

• Reactotron: ممتاز لتتبّع Redux/Zustand actions وحالة MMKV، وعرض استعلامات SQLite في جدول قابل للترتيب. أستخدمه شخصياً كطبقة إضافية لتتبّع منطق التطبيق طويل الأمد.
• سجلات Metro (Console logs): ما زالت أسرع طريقة لتشخيص خطأ يحدث عند الإقلاع. اضغط Ctrl+C ثم npx expo start --clear لمسح ذاكرة التخزين المؤقت عند رؤية سلوك غريب.
• LogBox / RedBox: شاشات الأخطاء داخل التطبيق حصلت في 2026 على تحسينات source map أفضل، وتربط الخطأ بسطر الشيفرة الأصلي حتى في builds المضغوطة.
• Perfetto (أندرويد) و Instruments (iOS): لا غنى عنها عند تتبّع frame drops على مستوى الـ Compositor.

حلّ المشكلات الشائعة عند التنقيح

هذه أكثر خمس مشاكل قابلتها أو صادفتها في مراجعات الكود (وقد صدمتني إحداها شخصياً عند إطلاق آخر تحديث لتطبيقي):

نقاط التوقف لا تعمل

السبب الأشيع: source maps غير محمّلة بعد. انتظر بضع ثوانٍ بعد فتح DevTools وأعِد تحميل التطبيق. تأكّد أيضاً أن Metro يعمل بوضع Development وليس Production.

نافذة DevTools تفتح فارغة

يحدث إذا كنت متصلاً بجهاز فعلي عبر ADB tunnel وانقطع الاتصال. أعِد تشغيل adb kill-server && adb start-server، ثم أعِد فتح DevTools.

Network فارغ رغم وجود طلبات

تحقّق أن مشروعك على React Native ≥ 0.81. الإصدارات الأقدم تحتاج polyfill يدوي عبر XHRInterceptor. إذا كنت على Expo SDK 52+ فأنت على 0.81+ تلقائياً.

تبويب Components لا يظهر

افتح DevTools قبل تشغيل التطبيق، ثم أعِد تحميله. أحياناً يفشل تسجيل React DevTools hook إذا فُتحت DevTools متأخّرة.

رسائل «Hermes debugger disconnected»

يحدث بعد إعادة التحميل السريعة عدة مرات. الحل: أغلق DevTools وأعِد فتحها من j في Metro. فريق React Native يعمل على إصلاح دائم في 0.83.

الأسئلة الشائعة

هل ما زال Flipper يعمل مع React Native في 2026؟

تقنياً نعم للإصدارات القديمة (0.72 وأقل)، لكنه غير مدعوم رسمياً منذ منتصف 2024 وأُزيلت تبعياته من قوالب المشاريع في 0.74. أي مشروع جديد أو مهاجَر إلى New Architecture يجب أن يعتمد على React Native DevTools.

هل أحتاج لتثبيت إضافة React DevTools منفصلة كما في الويب؟

لا. تبويبَا Components و Profiler مدمجَان تلقائياً داخل نافذة React Native DevTools ويعرضان شجرة مكوّنات React الكاملة دون أي تثبيت إضافي.

كيف أنقّح تطبيقاً على جهاز فعلي بدلاً من محاكي؟

تأكّد أن الجهاز والحاسوب على نفس شبكة Wi-Fi، ثم افتح Dev Menu داخل التطبيق واختر Open DevTools. يمكنك أيضاً استخدام adb reverse tcp:8081 tcp:8081 على أندرويد إن كنت تفضّل USB.

هل تدعم React Native DevTools تنقيح الشبكة لطلبات axios؟

نعم. الفاحص يعمل على مستوى fetch الأصلي، وبما أن axios في React Native يستخدم XHR فوق نفس الطبقة، تظهر جميع طلباته مع الرؤوس والحمولة والاستجابة بدءاً من الإصدار 0.81.

ما الفرق بين React Native DevTools و Reactotron؟

DevTools يركّز على تنقيح جافاسكربت، الشبكة، الأداء وشجرة React. Reactotron يتفوّق في تتبّع state actions (Redux/Zustand) وعرض بيانات AsyncStorage/MMKV/SQLite. الأداتان مكمّلتان وليستا متنافستين.

لماذا لا تعمل نقاط التوقف الشرطية عندي؟

غالباً بسبب source maps قديمة. أوقف Metro، شغّل npx expo start --clear، وأعد فتح DevTools قبل تحميل الشاشة التي تريد التوقّف فيها. تأكّد أيضاً من أنك على Hermes وليس JSC.