Elements: افحص وعدّل مباشرة
شجرة DOM الحيّة للصفحة مع الأنماط المحسوبة والوراثة ونموذج الصندوق. غيّر قيمة فيعيد الجهاز الرسم فورًا: أسرع طريق إلى خلل التنسيق على الهاتف.
صحّح صفحات الويب في هاتفك من جهاز الكمبيوتر
تمامًا كضغط F12 في متصفحك، لكن على الصفحات المفتوحة على جهاز iOS أو أندرويد حقيقي: تبويبات المتصفح، أو WebView / H5 المضمّنة داخل تطبيق. فحص العناصر، أخطاء الطرفية، نقاط التوقف في المصدر، طلبات الشبكة، ملفات تعريف الارتباط والتخزين المحلي.
- طلبات WebView داخل التطبيقات
- طلبات متصفح الهاتف
- شاشة الجهاز بجانب اللوحات
- دون تعديل التطبيق
تصحيح الويب على الهاتف، دون الالتفاف المعتاد
كل ما يلي هو يوم عادي في تصحيح صفحة على الهاتف. العمود الأيمن يوضّح الطريقة المعتادة.
| ما تريد فعله | الطريقة المعتادة | مع مفتش الويب |
|---|---|---|
| التنسيق يختل على الهاتف فقط | تخمين الإصلاح وإعادة البناء والنشر ثم النظر من جديد | تعديل العنصر وCSS مباشرة ورؤية الجهاز يتحدّث في الحال |
| شاشة بيضاء أو زر لا يفعل شيئًا | لا طرفية على الهاتف، فتضيف تنبيهات وسجلات | أخطاء الطرفية وسجلاتها كما أطلقتها الصفحة تمامًا |
| معرفة أي سطر من JavaScript أطلق الطلب | الالتقاط يُظهر الطلب ولا يُظهر من استدعاه | نقاط توقف وتنفيذ خطوة بخطوة في Sources مع المتغيّرات أمامك |
| رؤية ما في ملفات تعريف الارتباط وlocalStorage فعلاً | الاستنتاج من ترويسات الطلب | جداول كاملة — الاسم والقيمة والنطاق وتاريخ الانتهاء وSecure وHttpOnly وSameSite — وقابلة للتعديل |
| تصحيح صفحة H5 مضمّنة داخل تطبيق | مدفونة في حركة البيانات ولا سبيل للاتصال بها | مُدرجة تحت التطبيق الذي يحتويها: تختارها وتصحّحها كأي صفحة |
| مجرد تشغيل التصحيح عن بُعد | إعدادات مختلفة لكل منصة ومداخل مخفية وخطوات مرهقة | نافذة واحدة: اختر الجهاز، اختر الصفحة، اضغط تصحيح |
| قراءة حركة الشبكة وحالة الصفحة معًا | أداة التقاط وأداة تصحيح متجاورتان بلا رابط بينهما | كلتاهما في أداة واحدة: الطلب بعد فك تشفيره والشيفرة التي أرسلته |
أدوات مطوّر حقيقية موجّهة إلى الجهاز
ليست عارضًا مبسّطًا، بل اللوحات نفسها التي تستخدمها على الكمبيوتر، متصلة بالصفحة التي تعمل على الهاتف.
Console: أخطاء وسطر أوامر حيّ
كل خطأ وكل سجل أنتجته الصفحة، مع سطر أوامر ينفّذ شيفرة JavaScript الخاصة بك داخل تلك الصفحة على ذلك الجهاز. وداعًا للتصحيح بـ alert().
Sources: نقاط توقف وتنفيذ خطوة بخطوة
تصفّح النصوص البرمجية وأوراق الأنماط المُحمَّلة، وضع نقاط توقف، وتتبّع مكدّس الاستدعاءات، وافحص المتغيّرات في اللحظة التي يقع فيها الخلل.
Network: كل طلب في مخطط شلالي
الحالة والنوع ومصدر الإطلاق والحجم والتوقيتات وحالة التخزين المؤقت لكل طلب، مع مجاميع عدد الطلبات والبايتات المنقولة وDOMContentLoaded وزمن التحميل الكامل.
Storage: الارتباط والمحلي والجلسة
ملفات تعريف الارتباط مجمّعة حسب النطاق مع تاريخ الانتهاء وSecure وHttpOnly وSameSite، وبجوارها localStorage وsessionStorage: أسرع مكان لحل مشكلات حالة تسجيل الدخول.
شاشة الجهاز على شاشتك
على أندرويد تُعرض الصفحة الحيّة بجانب اللوحات ويمكنك النقر والتمرير عليها بالفأرة: الفحص والتشغيل على شاشة واحدة بدل التنقل بين الهاتف ولوحة المفاتيح.
كيف يبدو الأمر
جلسات حقيقية على هاتف حقيقي، بلا أي تجميل.
ما الذي يمكنك تصحيحه
هواتف وأجهزة لوحية ومحاكيات، إضافة إلى متصفح على جهازك نفسه.
| هذا الكمبيوتر | iOS | أندرويد | |
|---|---|---|---|
| تبويبات المتصفح | ✓ | ✓ | ✓ |
| صفحات داخل التطبيقات (WebView / WKWebView / H5) | ✓ | ✓ | ✓ |
| محاكي | — | ✓ | ✓ |
| فحص العناصر والأنماط وتعديلها مباشرة | ✓ | ✓ | ✓ |
| الطرفية ونقاط التوقف والتنفيذ خطوة بخطوة | ✓ | ✓ | ✓ |
| مخطط شبكة شلالي للصفحة | ✓ | ✓ | ✓ |
| ملفات تعريف الارتباط / localStorage / sessionStorage | ✓ | ✓ | ✓ |
| شاشة الجهاز بجوار اللوحات | — | — | ✓ |
| بلا شهادة وبلا إعداد وكيل | ✓ | ✓ | ✓ |
تحضير لمرة واحدة قبل البدء
الكتل الثلاث التالية بدائل لبعضها: نفّذ ما يخص هدفك أنت، ومرة واحدة فقط.
جهاز iOS
وصّل الكابل وأبقِ الجهاز مفتوح القفل. لـ Safari فعّل الإعدادات ← Safari ← متقدّم ← مفتش الويب، ولـ Chrome فعّل إعدادات Chrome ← إعدادات المحتوى ← مفتش الويب.
جهاز أندرويد
وصّل الكابل وفعّل تصحيح USB من خيارات المطوّر. المحاكيات تُكتشف عادةً دون كابل.
متصفح هذا الكمبيوتر
شغّل Chrome أو Edge بالوسيط --remote-debugging-port=9222، ثم اضغط تحديث في قائمة الصفحات.
وصفحة داخل تطبيق أيضًا؟ شيء واحد إضافي
تخطَّ هذا إن كنت تحتاج تبويبات المتصفح فقط. تطبيقك أنت: في أندرويد استدعِ مرة واحدة setWebContentsDebuggingEnabled(true)، ومن iOS 16.4 اضبط isInspectable = true على WKWebView. تطبيق غيرك أو دون تعديل الكود: فعّل خيار «تضمين الصفحات داخل التطبيقات» لتظهر صفحات التطبيقات المفتوحة في القائمة — يتطلب ذلك صلاحيات Root على أندرويد، وعلى iOS يعمل مع التطبيقات الموقّعة للتطوير فقط.
بعد ذلك، كل جلسة تختصر إلى هذا
التقاط جديد ← الهدف (هذا الكمبيوتر / iOS / أندرويد) ← الطريقة «مفتش الويب» ← تحديث ← اختر الصفحة ← Inspect. تُفتح أدوات مطوّر كاملة في متصفحك، ويمكنك فتح أي عدد منها في الوقت نفسه.
وحتى الصفحات المخبّأة داخل التطبيقات
معظم التطبيقات نصفها أصلي ونصفها ويب. وتسكن الأخطاء المزعجة عادةً في صفحات H5 المضمّنة تلك، وهناك تحديدًا لا تمنحك الأدوات المعتادة شيئًا.
مجمّعة حسب التطبيق
قائمة الصفحات منظّمة حسب التطبيق، فتميّز بنظرة واحدة بين صفحة دفع داخل التطبيق وتبويب متصفح، وتتصل بالصفحة التي تقصدها بالضبط.
خانة اختيار واحدة
«تضمين صفحات داخل التطبيقات» يضيف إلى القائمة صفحات التطبيقات المفتوحة حاليًا. ألغِ التحديد فتعود تبويبات المتصفح وحدها.
لا يترك أثرًا
لا تعيد بناء التطبيق ولا توقّع شيئًا ولا تثبّت أداة مساعدة على الجهاز. وبانتهاء الجلسة يعود الجهاز إلى ما كان عليه.
يتكامل مع التقاط حركة الشبكة
صحّح الصفحة هنا والتقط حركة التطبيق نفسه في الأداة نفسها: HTTPS مفكوك التشفير، حتى في التطبيقات التي تثبّت الشهادة أو تتجاهل وكيل النظام.
تصحيح الويب على الهاتف: أسئلة شائعة
كيف أفحص عنصرًا على الهاتف؟
وصّل الهاتف بالكمبيوتر عبر USB، وافتح Trace Eagle، واختر التقاط جديد ← iOS أو أندرويد ← الطريقة «مفتش الويب»، ثم اختر الصفحة واضغط تصحيح. تُفتح على الكمبيوتر لوحة Elements كاملة تعرض DOM وCSS الحيّين لصفحة الجهاز؛ وتغيير أي قيمة فيها يغيّر الصفحة على الهاتف فورًا.
هل يمكنني تصحيح WebView على أندرويد دون تعديل التطبيق؟
نعم. تظهر مباشرةً في القائمة عناصر WebView التي تسمح بالتصحيح أصلاً. أما التطبيقات التي لا تتيحها فحدّد «تضمين صفحات داخل التطبيقات» لتُضاف صفحات التطبيقات المفتوحة حاليًا — يتطلب ذلك جهازًا مُجذَّرًا، ولا يجري أي إعادة بناء أو إعادة تحزيم أو تثبيت دائم.
كيف أصحّح صفحة ويب على iPhone أو iPad؟
وصّل الجهاز وافتح قفله وفعّل الإعدادات ← Safari ← متقدم ← مفتش الويب (أو إعدادات Chrome ← إعدادات المحتوى ← مفتش الويب). ثم اختر الجهاز والصفحة في Trace Eagle واضغط تصحيح: يُفتح مفتش الويب الكامل في متصفح الكمبيوتر بلوحات Elements وConsole وSources وNetwork وStorage وLayers وغيرها.
هل هذا مثل chrome://inspect؟
يؤدي المهمة نفسها وأكثر، في نافذة واحدة. صفحة التصحيح عن بُعد المدمجة في المتصفح لا تتعامل إلا مع أهداف Chromium على أندرويد؛ أما هنا فتجتمع iOS وأندرويد والمتصفح المحلي في المُحدِّد نفسه، وتُجمَّع الصفحات حسب التطبيق، وتُضاف صفحات H5 المضمّنة بخانة اختيار، وإلى جانب ذلك كله أداة التقاط تفك تشفير حركة HTTPS للتطبيق نفسه.
هل أحتاج إلى كسر الحماية أو التجذير؟
لا للتصحيح المعتاد: تبويبات المتصفح والتطبيقات التي تسمح بذلك أصلاً تعمل على جهاز بحالته الأصلية. الخيار الإضافي الذي يضيف صفحات تطبيقات الطرف الثالث وحده يتطلب جهاز أندرويد مُجذَّرًا؛ وعلى iOS يحدّد النظام أي التطبيقات يمكن تضمينها.
هل يلزم شهادة أو وكيل أو حزمة SDK داخل التطبيق؟
لا شيء من الثلاثة. يمرّ التصحيح عن بُعد عبر وصلة USB: لا وكيل تضبطه، ولا شهادة جذر تثبّتها على الجهاز، ولا SDK أو مكتبة تضيفها إلى التطبيق.
ما الفرق بينه وبين التقاط حركة الشبكة؟
الالتقاط يجيب عمّا مرّ عبر الشبكة: الطلب والاستجابة والترويسات والمحتوى بعد فك التشفير. ومفتش الويب يجيب عمّا فعلته الصفحة: DOM والأنماط وأخطاء الطرفية وأي نص برمجي أطلق الطلب وما كان مخزّنًا في ملفات تعريف الارتباط والتخزين قبل ذلك. ويضم Trace Eagle الاثنين معًا، فتنتقل بينهما دون تبديل الأداة.
بأي متصفح تُفتح نافذة التصحيح؟
جلسات أندرويد والمتصفح المحلي تُفتح في Chrome أو Edge أو Brave (ويشغّل Trace Eagle أحدها نيابة عنك)؛ أما جلسات iOS فتعمل في أي متصفح.
هل يعمل مع المحاكيات؟
نعم. تُكتشف محاكيات أندرويد عادةً دون كابل، وكذلك محاكيات iOS العاملة على الجهاز نفسه — والخطوات مطابقة تمامًا لخطوات الجهاز الحقيقي.
هل مفتش الويب مجاني؟
نعم. مثل بقية Trace Eagle، هو مجاني بالكامل على macOS وWindows وLinux، بلا أي ميزات مدفوعة.