مفتش الويب

تخطيط يتعطّل فقط على الجوال، زر لا يستجيب، صفحة H5 تبقى بيضاء — على الكمبيوتر يكفي الضغط على F12 لترى السبب فورًا. أما على الجوال فغالبًا لا يتبقّى سوى إضافة alert، إعادة البناء، والنظر مجددًا. مفتش الويب يصل هذه الأدوات نفسها بالصفحة الحقيقية على الجهاز: وصّل الكابل، وتُفتح Elements وConsole وSources وNetwork وStorage على الكمبيوتر، مع إعادة رسم الجهاز فور تغييرك لأي قيمة.

---

1. كيف يتوزّع العمل مع التقاط الحزم

تحتاج الاثنين معًا، لكنهما يجيبان عن سؤالين مختلفين:

	التقاط الحزم	مفتش الويب
يجيب عن	ما الذي مرّ عبر الشبكة	ما الذي فعلته الصفحة
يُظهر	الطلبات / الردود، الترويسات، المحتوى (بعد فك التشفير)	شجرة DOM، الأنماط الفعّالة، أخطاء الطرفية، مكدّسات الاستدعاء، ملفات تعريف الارتباط والتخزين
سؤال نموذجي	ماذا أعادت هذه النقطة، وهل المعاملات صحيحة	أي سطر جافاسكريبت أرسل هذا الطلب، ولماذا لم يُطبَّق هذا النمط

يُظهر الالتقاط الطلب لكنه لا يُظهر أبدًا من استدعاه؛ يضع المفتش نقطة توقف في Sources ويعيدك تحديدًا إلى ذلك السطر. كلاهما يعيش في الأداة نفسها، فالتنقّل بينهما لا يكلّف شيئًا.

---

2. تحضير لمرة واحدة

الكتل الثلاث التالية بدائل لبعضها: نفّذ ما يخص هدفك أنت، ومرة واحدة فقط.

جهاز iOS

وصّل الكابل، وأبقِ الجهاز مفتوح القفل، وفعّل مفتاح مفتش الويب:

• Safari: الإعدادات ← Safari ← متقدّم ← مفتش الويب
• Chrome: إعدادات Chrome ← إعدادات المحتوى ← مفتش الويب

هذه هي الخطوة الأكثر إغفالًا على iOS. من دونها يُكتشف الجهاز لكن قائمة الصفحات تبقى فارغة.

جهاز أندرويد

وصّل الكابل وفعّل تصحيح USB من خيارات المطوّر. عادةً ما تُكتشف محاكيات أندرويد دون كابل.

متصفح هذا الكمبيوتر

شغّل Chrome أو Edge بالوسيط --remote-debugging-port=9222، ثم اضغط تحديث في قائمة الصفحات.

# macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

---

3. وصفحة داخل تطبيق أيضًا؟ شيء واحد إضافي

يمكنك تخطّي هذا القسم إن كنت تحتاج تبويبات المتصفح فقط.

تطبيقك أنت: فعّله مرة واحدة في الشيفرة.

// أندرويد: استدعِ مرة واحدة عند بدء Application أو Activity
WebView.setWebContentsDebuggingEnabled(true);

// من iOS 16.4: اجعل WKWebView قابلة للفحص
webView.isInspectable = true

تطبيق غيرك، أو دون تعديل الشيفرة: فعّل خيار «تضمين الصفحات داخل التطبيقات» في مربع الحوار، فتنضم صفحات التطبيقات المفتوحة إلى القائمة. أزل التفعيل لتعود إلى تبويبات المتصفح فقط.

	الشرط	ملاحظة
أندرويد	جهاز بصلاحيات Root	يفعّل تصحيح WebView على التطبيقات قيد التشغيل دون إعادة تعبئة
iOS	تطبيقات موقّعة للتطوير فقط	قيد من النظام — لا يمكن تضمين التطبيقات المثبَّتة من App Store

في الحالتين، لا تُعاد بناء التطبيق أبدًا، ولا يُوقَّع من جديد، ولا يُثبَّت أي مساعد على الجهاز. عند انتهاء الجلسة يعود الجهاز إلى ما كان عليه.

---

4. بدء التصحيح

بعد إنجاز ذلك، تختصر كل جلسة إلى هذا:

التقاط جديد ← الهدف (هذا الكمبيوتر / iOS / أندرويد) ← الطريقة «مفتش الويب» ← تحديث ← اختر الصفحة ← Inspect

• تظهر الصفحات مجمّعة حسب التطبيق المالك، فتُميَّز الصفحة داخل تطبيق عن تبويب المتصفح من أول نظرة.
• يفتح الضغط على Inspect أدوات مطوّر كاملة في متصفح الكمبيوتر، متصلة بتلك الصفحة على ذلك الجهاز.
• افتح منها ما شئت في الوقت نفسه — نافذة واحدة لكل صفحة، تعمل جميعها معًا.

أي متصفح يفتح نافذة التصحيح

تحتاج جلسات أندرويد والمتصفح المحلي إلى Chrome أو Edge أو Brave (يشغّل Trace Eagle أحدها تلقائيًا)؛ أما جلسات iOS فتعمل في أي متصفح.

---

5. ماذا ترى

اللوحات نفسها التي تستخدمها كل يوم على الكمبيوتر، موجَّهة هذه المرة إلى الصفحة على الجوال.

اللوحة	ما تتيحه
Elements	شجرة DOM الحيّة للصفحة مع الأنماط الفعّالة والوراثة ونموذج الصندوق. غيّر قيمة ويعيد الجهاز الرسم فورًا — أسرع طريقة لتحديد خلل في تخطيط الجوال
Console	كل خطأ وسجلّ أنتجته الصفحة، إضافة إلى سطر لتنفيذ جافاسكريبت مباشرة داخل تلك الصفحة على ذلك الجهاز
Sources	تصفّح النصوص البرمجية وأوراق الأنماط التي حمّلتها الصفحة، ضع نقاط توقف، تتبّع مكدّس الاستدعاء، وافحص المتغيّرات في اللحظة التي يحدث فيها الخلل بالضبط
Network	كل طلب أرسلته الصفحة على شكل شلال: الحالة، النوع، الجهة المُصدرة، الحجم، التوقيت، وحالة التخزين المؤقت، مع إجماليات لعدد الطلبات والبايتات المنقولة وDOMContentLoaded ووقت التحميل الكامل
Storage	ملفات تعريف الارتباط مجمّعة حسب النطاق مع تاريخ الانتهاء وSecure وHttpOnly وSameSite، وبجانبها localStorage وsessionStorage — أسرع طريقة لحلّ خلل في حالة تسجيل الدخول

على أندرويد، تُعرض شاشة الجهاز الحيّة بجانب اللوحات ويمكن النقر والتمرير عليها بالماوس — يتم الفحص والتشغيل على شاشة واحدة، دون التنقّل بين الجوال ولوحة المفاتيح.

---

6. نطاق الدعم

	هذا الكمبيوتر	iOS	أندرويد
تبويبات المتصفح	✓	✓	✓
الصفحات داخل التطبيقات (WebView / WKWebView / H5)	✓	✓	✓
المحاكي	—	✓	✓
فحص وتعديل العناصر والأنماط مباشرة	✓	✓	✓
الطرفية ونقاط التوقف والتنفيذ خطوة بخطوة	✓	✓	✓
شلال طلبات الشبكة للصفحة	✓	✓	✓
Cookie / localStorage / sessionStorage	✓	✓	✓
شاشة الجهاز بجانب اللوحات	—	—	✓
دون شهادة أو وسيط يُعدّ	✓	✓	✓

---

7. لا يظهر شيء؟ تحقّق من هذا أولًا

العارض	غالبًا السبب	ما العمل
الجهاز مكتشَف، قائمة الصفحات فارغة	مفتش الويب على iOS معطّل، أو الشاشة مقفلة	نفّذ القسم 2، فعّله، أبقِه مفتوح القفل، ثم اضغط تحديث
أندرويد لا يُظهر صفحات داخل التطبيقات	لم يُفعَّل التصحيح لتلك الـWebView قط	تطبيقك: أضف setWebContentsDebuggingEnabled(true)؛ تطبيق غيرك: فعّل «تضمين الصفحات داخل التطبيقات» (يتطلب Root)
تطبيق iOS معيّن لا يظهر أبدًا	قيد من النظام	لا يمكن تضمين إصدارات App Store — فقط التطبيقات الموقّعة للتطوير
المتصفح المحلي لا يعرض أي صفحات	شُغّل دون منفذ التصحيح	أعد تشغيل Chrome / Edge بالوسيط --remote-debugging-port=9222 ثم اضغط تحديث
لا يحدث شيء عند الضغط على Inspect	متصفح غير مدعوم	تحتاج جلسات أندرويد والمحلية إلى Chrome أو Edge أو Brave

---

8. متى تستخدمه

• خلل يظهر على الجوال فقط: التخطيط، مناطق اللمس، عرض الخطوط.
• صفحة H5 تبقى بيضاء أو معطّلة وتحتاج رؤية أخطاء الطرفية ومكدّس الاستدعاء.
• تريد معرفة أي نص برمجي أرسل طلبًا — الالتقاط وحده لن يخبرك بذلك.
• تطارد مشكلة في تسجيل الدخول أو التخزين المؤقت وتحتاج رؤية ما هو مخزّن فعليًا في ملفات تعريف الارتباط والتخزين.
• تصحّح H5 مضمّنة داخل تطبيق — الأدوات المعتادة لا تمنحك شيئًا هنا.

---

العودة إلى البدء · ذو صلة: الفحص وفك الترميز · التقاط iOS · التقاط أندرويد