يلتقط مراقب الشبكة كافة الطلبات التي تنفذها الصفحة الحالية ويعرضها — سواء مكالمات واجهة التطبيقات (XHR/Fetch)، أو تحميل السكربتات والأكواد، أو جلب قوالب التنسيق، أو تنزيل الصور، أو ملفات الخطوط وغيرها. اطلع على الروابط، وطرق الـ HTTP، ومخرجات حالة رموز الاستجابة، وأحجام الردود، والجدول الزمني — كل ذلك في لوحة عائمة تتحدث باستمرار دون الحاجة لفتح أدوات المطورين.
تعتبر علامة تبويب (Network) في متصفحك الأساسي قوية ولكنها ثقيلة — فهي تستهلك مساحة كبيرة من الشاشة، ويتم إعادة تعيينها ومسحها عند التنقل، وتتطلب منك الابتعاد وتشتيت التركيز عن محتوى الصفحة. لذا يوفر (مراقب الشبكة - Network Monitor) ميزات المراقبة الأساسية والضرورية في لوحة عائمة خفيفة الوزن مرابضة أعلى التبويبة. فهي تعترض مسار طلبات (XHR و Fetch) وتراقب تحميل الموارد عبر (Performance API)، لتعرض كل طلب شبكة أثناء حدوثه. ويُظهر كل إرسال: عنوان الـ URL، وطريقة الـ HTTP (من GET، و POST، و PUT، و DELETE)، ورمز الحالة (مُميز بالألوان: أخضر لـ 2xx، وأصفر لـ 3xx، وأحمر لـ 4xx/5xx)، وحجم الاستجابة بالبايت، والمدة بالمللي ثانية. انقر فوق أي عملية لتوسيع وتفحص بياناتها: كرؤوس الطلبات (request headers)، ورؤوس الاستجابة، وحمولة الطلب لـ (POST/PUT)، ومعاينة نص الرد، ومخطط التسلسل الزمني. كما يمكنك تصفية وعزل العمليات حسب النوع (XHR/Fetch، أو JS، أو CSS، أو Images، أو Fonts) للتركيز فقط على حزم البيانات التي تحقق فيها.
يظهر كل طلبات الشبكة في اللوحة أثناء حدوثها — أحمال الصفحة، ومكالمات الـ API، والموارد المحملة بشكل خفي، وجلب مهام الخلفية. يتم تحديث ومزامنة الخلاصة في الوقت الفعلي دون الحاجة لأي تنشيط وتحديث يدوي.
انقر على أي طلب للغوص في أعماقه: رابط الـ URL الدقيق، الطريقة والبروتوكول، الرؤوس المرفقة، البيانات المرسلة (في POST/PUT)، تفاصيل ورؤوس الاستجابة (بتنسيق JSON الآلي)، رمز حالة الرد، الحجم بالبايت، وتفكيك المدة والزمن المستغرق.
قم بتصفية الطلبات بصرامة: XHR/Fetch (لمكالمات الـ API)، أو JS (للسكربتات)، أو CSS (لأنماط التنسيق)، أو IMG (لصور وفنون الموقع)، أو Font (لخطوط الويب)، أو الكل. أعزل تدفق ومرور الـ API عن تحميل واجهة الموارد للتركيز على ما يهمك فقط.
يتم تمييز رموز ردود الخادم بألوان متعارف عليها لسرعة التعرف عليها: الأخضر (2xx - ناجح)، الأصفر (3xx - لإعادة التوجيه)، والأحمر المثير للقلق (4xx - لأخطاء العميل) و (5xx - انهيارات الخادم). لتصبح الطلبات الفاشلة واضحة وفاضحة للعيان.
يفصح كل طلب عن حجم الرد المنقول (بالكيلوبايت) والمدة الزمنية والرحلة الإجمالية (بالمللي ثانية). حدد مكالمات الاستجابات البطيئة للـ API، والموارد الضخمة والمعيقة، والطلبات الزائدة وغير الضرورية التي تستنزف أداء الصفحة.
يعرض الشريط الموجز إجمالي عدد الطلبات وحجم التنزيل المجمع لكافة العمليات الملتقطة. قم بتصفية الملخص والموجز لرؤية المجاميع لكل نوع — ولتعرف كمية معدل نقل البيانات المستهلكة على الأكواد مقارنة بالصور مقابل طلبات الـ API.
راقب ودقق في طلبات الـ XHR/Fetch للتأكد من أن واجهتك الأمامية تتصل بالخادم وتدعو الروابط (Endpoints) الصحيحة بالمعاملات المناسبة. انقر وفكك هياكل الطلبات والاستجابات — لاصطياد وتحجيم تنافر وهفوات بياناتك بلمح البصر.
النقاط الحمراء الدامية كـ 404 و 500 تسلط الضوء وبقوة على موارد ومكالمات الـ API المحتضرة. شاهد وتعقب أي الروابط التي تفشل، ومتى تعطلت وتخبطت، وما هي إجابة واستجابة الخادم لرسالة الخطأ.
افرز وصنف الطلبات وفقاً للمدة للعثور على أبطأ وتيرة ردود بالموقع. وافرزها استناداً على الحجم للوصول إلى العتاد الضخم. يوفر الموجز نظرة وإجابة شاملة للنطاق الترددي — هل تجري الصفحة طلبات ملقاة أكثر من اللازم أم تضخ وتسحب حجماً هائلاً من البيانات لا يمكن احتماله؟
اكتشف حجم العمليات غير المرئية التي يحيكها الموقع في الظل — كنغمات ومضات التحليل، ومكالمات نبضات القلب المستمرة، وطلبات الاستطلاع المتوالية، والموارد بطيئة التحميل. افهم واستوعب الصورة الكاملة لأشرس أنشطة الشبكة بعيداً عن أعين ورؤية المستخدم.
قم بتصفية المسارات للتحقق من النطاقات التي يتم التواصل والاتصال بها. تعرف واطّلع على نصوص الجهات الخارجية ومواقع الويب المتداخلة التي تجري وتفتعل طلبات شبكة مفاجئة — كبكسلات التتبع، وزحف البيانات، أو مكالمات الـ API الخارجية المجهولة التي تمر من خلف كواليسك.
افتح لوحة DevSuite Pro العائمة وانقر على أيقونة (Network Monitor). ستفتح لك اللوحة وتبدأ في تتبع العمليات فوراً كصائد الشباك.
استخدم وتجول بالصفحة بشكل طبيعي. سيُدرج كل اتصال وطلب شبكة في القائمة بمجرد إجرائه — أكان مكالمات API، أم أصول محتويات، أم اتصالات وأنشطة خفية فالكل مقبوض عليه.
انقر على مجموعة التصفية (XHR، و JS، و CSS، و IMG، و Font) لتضييق نطاق الرؤية. اجلب مكالمات الـ API فقط لتصحيح أخطاء سحب وعرض البيانات، أو استعرض الصور لوحدها للتحقق من سلامة تحميل جرافيك الصفحة.
انقر على سطر العملية لكشف المستور: من مسار الروابط والرؤوس، إلى حمولة التصدير ونصوص الاستجابة والأرقام والأزمان.
الرموز الحمراء (كـ 404، و 500) توثق عمليات فاشلة وخاطئة. والأزمان المستغرقة البطيئة تعكس عنق زجاجة خانق في الأداء. بينما الأحجام الهائلة والمبالغ فيها تستدعي جرس الإنذار للحاجة الماسة للمراجعة والتحسين.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.
