تجاوز محتوى الويب وعناوين استجابة HTTP محليًا

Sofia Emelianova

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

استخدِم عمليات التعديل المحلية لمحاكاة الموارد المتاحة عن بُعد حتى إذا لم يكن بإمكانك الوصول إليها. يمكنك محاكاة الردود على الطلبات والملفات المختلفة، مثل عناوين استجابة HTTP ومحتوى الويب، بما في ذلك طلبات XHR وfetch.

على سبيل المثال، يمكن أن تساعد عمليات الإلغاء المحلية في حالات الاستخدام التالية:

• إصلاح واجهات برمجة التطبيقات الوهمية وواجهات برمجة التطبيقات الاختبارية قبل نشرها
• يمكنك إنشاء نماذج أولية لتصاميم جديدة لواجهة المستخدم إذا كنت تعرف مسبقًا بُنى البيانات التي سيستخدمها الخلفية.
• اختبِر إصلاحات الأداء، مثل إزالة CLS، للتأكّد مسبقًا من أنّها مهمة.

ملاحظة: شاهِد الفيديو أعلاه لمعرفة المزيد من المعلومات عن حالات الاستخدام.

تتيح لك عمليات التجاوز المحلية أيضًا الاحتفاظ بالتغييرات التي تجريها في "أدوات مطوّري البرامج" عند إعادة تحميل الصفحات.

آلية العمل

• عند إجراء تغييرات في "أدوات مطوّري البرامج"، تحفظ "أدوات مطوّري البرامج" نسخة من الملف المعدَّل في مجلد تحدّده.
• عند إعادة تحميل الصفحة، تعرض "أدوات مطوّري البرامج" الملف المعدَّل المحلي بدلاً من مرجع الشبكة.

ملاحظة: يؤدي تجاهل الإعدادات التلقائي إلى إيقاف ذاكرة التخزين المؤقت تلقائيًا.

يمكنك أيضًا حفظ التغييرات مباشرةً في ملفات المصدر. اطّلِع على تعديل الملفات وحفظها باستخدام مساحات العمل.

القيود

تعمل عمليات التعديل المحلية مع عناوين استجابة الشبكة ومعظم أنواع الملفات، بما في ذلك طلبات XHR وfetch، مع بعض الاستثناءات:

• يتم إيقاف ذاكرة التخزين المؤقت عند تفعيل عمليات التجاوز المحلية.
• لا تحفظ "أدوات مطوّلي البرامج" التغييرات التي تم إجراؤها في شجرة DOM في لوحة العناصر.
• إذا عدّلت CSS في اللوحة الأنماط، وكان مصدر CSS هو ملف HTML، لن تحفظ "أدوات مطوّلي البرامج" التغيير.

بدلاً من ذلك، يمكنك تعديل ملفات HTML في لوحة المصادر.

إعداد إجراءات التجاوز المحلية

يمكنك تجاهل محتوى الويب أو عناوين الاستجابة على الفور في لوحة الشبكة:

1. افتح "أدوات مطوّري البرامج"، وانتقِل إلى لوحة الشبكة، ثم انقر بزر الماوس الأيمن على الطلب الذي تريد تجاهله، واختَر تجاهل العناوين أو تجاهل المحتوى من القائمة المنسدلة.
2. إذا لم يسبق لك إعداد عمليات التعديل المحلية، سيطلب منك DevTools في شريط الإجراءات في أعلى الصفحة:
   1. اختَر مجلدًا لتخزين الملفات التي تم تجاهلها فيه.
   2. انقر على السماح لمنح "أدوات مطوّري البرامج" حقوق الوصول إلى هذا المجلد.
3. إذا سبق لك إعداد عمليات تجاهل محلية ولكنّك أوقفتها، ستفعّلها "أدوات مطوّري البرامج" تلقائيًا.

4. بعد إعداد عمليات التعديل المحلية وتفعيلها، وبناءً على ما تريد تعديله، ستنقلك "أدوات مطوّري البرامج" إلى:

   • لوحة المصادر التي تتيح لك إجراء تغييرات على محتوى الويب
   • يسمح لك المحرّر في الشبكة > العناوين > عناوين الاستجابة بإجراء تغييرات على عناوين الاستجابة.

لإيقاف عمليات التجاوز المحلية مؤقتًا أو حذف جميع ملفات التجاوز، انتقِل إلى المصادر > عمليات التجاوز وأزِل العلامة من مربّع الاختيار تفعيل عمليات التجاوز المحلية أو انقر على محو على التوالي.

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

للاطّلاع بسرعة على جميع عمليات الإلغاء، انقر بزر الماوس الأيمن على طلب في لوحة الشبكة واختَر عرض جميع عمليات الإلغاء. ستنقلك "أدوات مطوّري البرامج" إلى المصادر > عمليات الإلغاء.

تجاهُل محتوى الويب

لتجاهل محتوى الويب، اتّبِع الخطوات التالية:

1. إعداد إجراءات التجاوز المحلي
2. إجراء تغييرات على الملفات وحفظها في "أدوات مطوّري البرامج"

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

على سبيل المثال، يمكنك تعديل الملفات في المصادر أو صفحات الأنماط المتتالية (CSS) في العناصر > الأنماط، ما لم تكن صفحات الأنماط المتتالية (CSS) مضمّنة في ملفات HTML.

تحفظ "أدوات مطوّلي Chrome" الملفات المعدَّلة، وتدرجها في المصادر > عمليات التجاوز، وتعرض لك الرمز بجانب الملفات المتجاوزة في اللوحات والأجزاء ذات الصلة: العناصر > الأنماط والشبكة والمصادر > عمليات التجاوز.

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

تجاهُل طلبات XHR أو طلبات الاسترجاع لمحاكاة الموارد المتاحة عن بُعد

باستخدام عمليات الإلغاء المحلية، لن تحتاج إلى الوصول إلى الخلفية ولن تضطر إلى الانتظار إلى أن تتوافق مع التغييرات التي تجريها. محاكاة التجارب وإجراؤها بسرعة:

1. إعداد إجراءات التجاوز المحلي
2. في الشبكة، فلتر طلبات XHR/fetch، وابحث عن الطلب الذي تحتاجه، وانقر عليه بزر الماوس الأيمن، ثم اختَر تجاهل المحتوى.
3. أجرِ التغييرات على البيانات التي تم جلبها واحفظ الملف.
4. أعِد تحميل الصفحة ولاحظ تطبيق التغييرات.

لمعرفة كيفية تنفيذ سير العمل هذا، شاهِد الفيديو التالي:

تتبُّع التغييرات المحلية

يمكنك تتبُّع جميع التغييرات التي تجريها على محتوى الويب في مكان واحد، وهو علامة تبويب درج التغييرات.

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

تجاوز عناوين استجابة HTTP

من لوحة الشبكة، يمكنك تجاهل عناوين استجابة HTTP بدون الحاجة إلى الوصول إلى خادم الويب.

باستخدام عمليات إلغاء عناوين الاستجابة، يمكنك إنشاء نماذج أولية محليًا لإصلاح مشاكل في عناوين مختلفة، بما في ذلك على سبيل المثال لا الحصر:

• عناوين مشاركة الموارد المشترَكة النطاق (CORS)
• عناوين Permissions-Policy
• عناوين Cross-Origin Isolation

لتجاوز عنوان استجابة، اتّبِع الخطوات التالية:

1. إعداد عمليات التجاوز المحلية وفتح الصفحة التي تريد تصحيح الأخطاء فيها
2. انتقِل إلى الشبكة، وابحث عن طلب، وانقر عليه بزر الماوس الأيمن، ثم اختَر تجاوز العناوين. ستنتقل إلى محرر العناوين > عناوين الاستجابة في "أدوات مطوّري البرامج".

3. مرِّر مؤشر الماوس فوق قيمة عنوان الاستجابة وضَع المؤشر هناك.

   

   بدلاً من ذلك، لتفعيل أداة تعديل عناوين الاستجابة، مرِّر مؤشر الماوس فوق قيمة عنوان استجابة وانقر على تعديل تعديل.

4. عدِّل رأس الصفحة أو أضِف رأسًا جديدًا.

   ملاحظة: يضيف هذا المثال العنوان Access-Control-Allow-Origin: * للتخلص من خطأ CORS.

   

   • لتعديل قيمة عنوان، انقر عليها.
   • لإضافة عنوان جديد، انقر على إضافة عنوان.
   • لإزالة عملية إلغاء لعنوان، انقر على بجانبه. يؤدي ذلك إلى إزالة العناوين التي أضفتها أو إعادة القيم المعدَّلة إلى القيم الأصلية.

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

5. أعِد تحميل الصفحة لتطبيق التغييرات.

تعديل جميع عمليات تجاوز عناوين الاستجابة

لتعديل جميع عمليات تجاهل العناوين في مكان واحد، اتّبِع الخطوات التالية:

1. انقر على .headers بجانب قسم عناوين الاستجابة.

   

   تنقلك "أدوات مطوّلي البرامج" إلى ملف .headers المقابل في المصادر > عمليات التجاوز.

2. عدِّل ملف .headers:

   

   • لإضافة قاعدة إلغاء جديدة، انقر على إضافة قاعدة إلغاء. القاعدة هنا هي مجموعة من العناوين والقيم وطلب واحد أو عدة طلبات لتطبيقها عليها.

     ملاحظة: يمكنك استخدام أحرف بدل لتحديد طلبات متعددة في الوقت نفسه. حدِّد شخصيات متعددة باستخدام * وشخصية واحدة باستخدام ?.

   • لإضافة زوج عنوان/قيمة إلى قاعدة، مرِّر مؤشر الماوس فوق زوج آخر وانقر على .

   • لإرجاع قيمة عنوان إلى حالتها السابقة، أزِل عنوانًا أو قاعدة مضافة، ومرِّر مؤشر الماوس فوقها وانقر على .

3. احفظ ملف .headers باستخدام Command / Control + S.

4. أعِد تحميل الصفحة لتطبيق التغييرات.