عندما يتعلق الأمر بتشخيص المشكلات في بيئة الإنتاج، غالبًا ما يكون هناك الكثير على المحك. قد يؤدي استدعاء واجهة برمجة التطبيقات (API) التي بها أخطاء، أو برنامج نصي تابع لجهة خارجية يسحب الأداء، أو خطأ غير مقصود في مسار البيانات إلى إنشاء مشكلات كبيرة بسرعة. لحسن الحظ، باستخدام Chrome DevTools، يمكنك اختبار الحلول والتحقق منها محليًا قبل إصدار أي تغييرات على النطاق العام. إحدى أقوى الأدوات في DevTools ولكنها غير مستغلة بشكل كافٍ هي ميزة التجاوز. فهو يسمح لك بتعديل استجابات الشبكة مباشرة، مما يتيح لك محاكاة سيناريوهات مختلفة دون تغيير بيئة الإنتاج الخاصة بك.

في هذا الدليل، سنوضح لك كيفية تثبيت DevTools (إذا لم تكن قد قمت بذلك بالفعل)، وكيفية تجاوز طلبات الشبكة خطوة بخطوة، وتقديم نصائح حول تحقيق أقصى استفادة من هذه الأداة التي لا تقدر بثمن.

لماذا استخدام تجاوزات الشبكة؟

تخيل أنك قادر على تعديل استجابة واجهة برمجة التطبيقات (API) أو محاكاة طلب شبكة فاشل، كل ذلك دون لمس رمز الواجهة الخلفية أو التأثير على المستخدمين. هذا هو بالضبط ما تمكنك تجاوزات الشبكة من القيام به. سواء كنت تحاول:

• اختبر سيناريوهات مختلفة لطلبات الشبكة البطيئة أو الفاشلة.
• تحقق من الميزات الجديدة قبل أن تصبح الواجهة الخلفية الخاصة بها جاهزة.
• تعديل الموارد الثابتة (مثل ملفات CSS أو JavaScript) لتصحيح مشكلات التصميم أو السلوك.

تمنحك DevTools بيئة يمكن التحكم فيها حيث يمكنك التعديل والتجربة والتحقق من الصحة، كل ذلك داخل المتصفح.

تثبيت أدوات تطوير Chrome

إذا كنت أحد مطوري الويب، فمن المحتمل أن يكون لديك بالفعل Google Chrome مثبتًا على جهازك. ولكن إذا لم تقم بإعداده بعد، فقم بتنزيله من موقع Chrome الرسمي. تأتي Chrome DevTools مدمجة في المتصفح، لذلك ستكون جاهزًا للاستخدام بمجرد تثبيتها.

نصيحة احترافية: تعمل أدوات DevTools أيضًا في المتصفحات الأخرى المستندة إلى Chromium مثل Edge وBrave وOpera، على الرغم من أن Chrome يميل إلى الحصول على أحدث الميزات.

الشروع في العمل مع تجاوزات شبكة DevTools

إذا كنت مستخدمًا جديدًا لـ DevTools أو هذه الميزة، فاتبع هذه الخطوات البسيطة:

1. فتح أدوات التطوير

انقر بزر الماوس الأيمن على أي عنصر في صفحة الويب الخاصة بك وحدد فحص. سيؤدي هذا إلى ظهور واجهة DevTools. وبدلاً من ذلك، يمكنك الضغط على Ctrl Shift I (Windows/Linux) أو Cmd Option I (Mac) لفتحه.

2. انتقل إلى علامة تبويب الشبكة

بمجرد فتح DevTools، انقر فوق علامة التبويب الشبكة. هنا، سترى بثًا مباشرًا لكل طلب شبكة يقدمه موقع الويب الخاص بك. بدءًا من استدعاءات واجهة برمجة التطبيقات وحتى تحميل الصور، يتم تسجيل كل شيء وإمكانية تتبعه في علامة التبويب هذه. إذا كانت القائمة تبدو كبيرة، فيمكنك استخدام عوامل التصفية (مثل XHR لطلبات AJAX) لتضييق نطاق العرض على الطلبات الأكثر صلة.

3. تحديد وتجاوز طلب محدد

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

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

4. تحرير الرد

بمجرد تحديد المجلد المحلي الخاص بك، سيتم فتح الاستجابة التي تريد تجاوزها تلقائيًا في علامة التبويب المصادر. هذا هو المكان الذي يمكنك فيه تعديل المحتوى حسب الحاجة. سواء كان الأمر يتعلق بتعديل استجابة JSON، أو ضبط وظيفة JavaScript، أو تعديل ملف HTML، فلك مطلق الحرية في إجراء التغييرات اللازمة.

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

5. الحفظ والتحديث

بمجرد إجراء تعديلاتك، احفظ الملف بالضغط على Ctrl S (Windows/Linux) أو Cmd S (Mac). ثم قم بتحديث صفحة الويب الخاصة بك. ستنعكس التغييرات الآن في بيئتك المحلية، مما يسمح لك باختبار طلب الشبكة المعدل كما لو كان مباشرًا.

نصيحة احترافية : تذكر أن هذه التغييرات تنطبق فقط على بيئتك المحلية. إذا قمت بإغلاق المتصفح أو مسح التجاوزات، فسيتم استئناف الطلبات الأصلية.

نصائح متقدمة للمستخدمين المتميزين

بينما توضح الخطوات المذكورة أعلاه أساسيات تجاوز استجابات الشبكة، توفر Chrome DevTools مزيدًا من المرونة لأولئك الذين يتطلعون إلى دفع تصحيح الأخطاء إلى المستوى التالي:

محاكاة ظروف الشبكة

تتيح لك Chrome DevTools أيضًا محاكاة ظروف الشبكة المختلفة. على سبيل المثال، إذا كنت تريد اختبار كيفية عمل التطبيق الخاص بك على اتصال 3G بطيء أو عندما تكون الشبكة غير متاحة مؤقتًا، فيمكنك التحكم في سرعة الشبكة ضمن علامة التبويب الشبكة. ما عليك سوى النقر على القائمة المنسدلة المسماة عبر الإنترنت واختيار ملف تعريف السرعة المطلوب.

يعد هذا مفيدًا بشكل خاص لضمان تدهور تطبيقك بشكل جيد عندما يكون لدى المستخدمين اتصال ضعيف أو نطاق ترددي محدود.

التجاوزات المحلية لملفات متعددة

هل تحتاج إلى تجاوز ملفات متعددة في وقت واحد؟ يمكنك إضافة طلبات متعددة إلى مجلد التجاوز الخاص بك، مما يتيح لك التحكم الكامل في العديد من جوانب موقع الويب الخاص بك. على سبيل المثال، يمكنك الجمع بين تجاوزات استجابة CSS وJavaScript وAPI لإنشاء بيئة محاكاة تعكس سيناريوهات العالم الحقيقي المحتملة، كل ذلك دون تغيير سطر واحد من تعليمات الإنتاج البرمجية.

التجاوزات المستمرة عبر الجلسات

إذا كنت تعمل بشكل متكرر على نفس المشروع، فإن Chrome DevTools يسمح لك بمواصلة تجاوزاتك عبر جلسات المتصفح. وهذا يضمن أنه حتى بعد إغلاق المتصفح، تظل تغييراتك نشطة في المرة التالية التي تفتح فيها المتصفح، مما يوفر لك الوقت والجهد.

لتمكين ذلك، انتقل إلى قائمة الإعدادات (رمز الترس) في DevTools، وانتقل إلى قسم التجاوزات، وحدد المربع الذي يشير إلى تمكين التجاوزات المستمرة.

خاتمة

لا يقتصر استخدام Chrome DevTools على فحص العناصر أو تصحيح أخطاء JavaScript فحسب، بل إنها أداة قوية بشكل لا يصدق يمكنها تحسين قدرتك على استكشاف الأخطاء وإصلاحها والتجربة في بيئة حية بشكل كبير. من خلال تعلم كيفية تجاوز استجابات الشبكة والاستهزاء بها، يمكنك اختبار حلول مختلفة ومحاكاة سيناريوهات مختلفة والتحقق من صحة التغييرات، كل ذلك دون التأثير على موقع الإنتاج الخاص بك.

سواء كنت مطورًا متمرسًا أو بدأت للتو، فإن إتقان ميزة التجاوز في Chrome DevTools سيؤدي إلى رفع مستوى مهاراتك في تصحيح الأخطاء ويمنحك المزيد من الثقة في التغييرات التي تجريها قبل نشرها. لذا، لا تقم بتصحيح الأخطاء فحسب، بل قم بالتصحيح بشكل أكثر ذكاءً!