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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

آلية العمل

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

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

القيود

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

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

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

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

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

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

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

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

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

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

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

لإلغاء محتوى الويب:

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

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

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

الرموز المقابلة بجانب الملفات التي تم إلغاؤها في "المصادر" و"الشبكة" و"العناصر" ثم "الأنماط"

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

رمز النقطة الأرجوانية مع تلميح بجانب علامة التبويب "الرد"

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

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

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

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

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

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

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

خيار "الفتح في المجلد المتضمّن"

تجاهُل عناوين استجابة HTTP

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

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

لتجاوز عنوان استجابة:

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

    محرِّر عناوين الردود

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

  4. عدِّل عنوانًا جديدًا أو أضِفه.

    تعديل قيمة عنوان حالية وإضافة قيمة جديدة وإزالة الإلغاء.

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

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

  5. يُرجى إعادة تحميل الصفحة لتطبيق التغييرات.

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

لتعديل جميع عمليات إلغاء الرؤوس في مكان واحد:

  1. انقر على تم الحفظ. .headers بجانب القسم عناوين الرد.

    رابط "تجاوز العنوان" بجانب قسم "عناوين الاستجابة"

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

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

    تعديل ملف .headers

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

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

    • للعودة عن قيمة عنوان، عليك إزالة عنوان أو قاعدة مُضافة، وتمرير مؤشر الماوس فوقها والنقر على .

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

  4. يُرجى إعادة تحميل الصفحة لتطبيق التغييرات.