الوصول إلى الخوادم المحلية ومثيلات Chrome باستخدام ميزة إعادة توجيه المنفذ

كايس باسك
ميجين كيرني
ميجين كيرني
صوفيا إميليانوفا
صوفيا إميليانوفا
GitHub

يمكنك استخدام إعادة توجيه المنفذ إلى:

  • الحالة 1: عليك تصحيح أخطاء علامة تبويب مفتوحة على نسخة مختلفة من Chrome.
  • الحالة 2: يمكنك استضافة موقع إلكتروني على خادم ويب لجهاز التطوير، ثم الوصول إلى المحتوى من جهاز Android من خلال كابل USB.

في الحالة 2، تعمل إعادة توجيه المنفذ من خلال منفذ TCP للاستماع على جهاز Android الذي يتم ربطه بمنفذ TCP في جهاز التطوير. تنتقل حركة البيانات بين المنافذ من خلال اتصال USB بين جهاز Android وجهاز التطوير، لذلك لا يعتمد الاتصال على إعدادات الشبكة.

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

إعداد قاعدة إعادة توجيه المنفذ

بناءً على حالتك، اتّبِع الخطوات التالية.

الحالة 1: إعداد إعادة توجيه المنفذ إلى مثيل Chrome آخر

  1. تشغيل نسخة Chrome أخرى باستخدام المعلَمة --remote-debugging-port=PORT، على سبيل المثال:

    MacOS

    open -a "Google Chrome" --args --remote-debugging-port=PORT

    أجهزة Windows

    start chrome --remote-debugging-port=PORT

    Linux

    google-chrome --remote-debugging-port=PORT

  2. في النسخة الافتراضية من Chrome، تُجري تصحيح الأخطاء باستخدام:

    1. فتح "chrome://inspect/#devices"
    2. احرص على وضع علامة في المربّع مربّع اختيار اكتشاف أهداف الشبكة.
    3. انقر على ضبط بجانب مربّع الاختيار.

    4. في إعدادات استكشاف الاستهداف، أدخِل localhost:PORT، واختر مربّع اختيار تفعيل إعادة توجيه المنفذ، ثم انقر على تم.

      نافذة إعدادات الاكتشاف المستهدَف

    5. مرة أخرى في الأجهزة، سترى هدفًا جديدًا عن بُعد. انقر على inspect بجانب علامة التبويب التي تريد تصحيح أخطائها.

      رابط الفحص بجانب علامة التبويب على الهدف البعيد.

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

    أدوات مطوّري البرامج في وضع الجهاز

  4. بجانب شريط العناوين، يمكنك تبديل أساليب الإدخال.

الحالة 2: إعداد إعادة توجيه المنفذ من خلال USB لجهاز Android

  1. إعداد تصحيح الأخطاء عن بُعد بين جهاز التطوير وجهاز Android. عند الانتهاء، من المفترض أن يظهر لك جهاز Android في القائمة.

    جهاز Android في القائمة

  2. تأكَّد من وضع علامة في المربّع مربّع اختيار اكتشاف أجهزة USB.

  3. انقر على إعادة توجيه المنفذ بجانب مربّع الاختيار.

  4. في إعدادات إعادة توجيه المنفذ، يتم إعداد localhost:8080 تلقائيًا. ضَع علامة في المربّع تفعيل إعادة توجيه المنفذ.

    إعدادات إعادة توجيه المنفذ..

  5. في حال كنت تريد إعداد منافذ أخرى، اتّبِع الخطوات التالية. وبخلاف ذلك، يمكنك تخطّي الخطوات والنقر على تم.

  6. في الحقل النصي Port (المنفذ) على اليمين، أدخِل رقم المنفذ الذي تريد أن تتمكّن من خلاله من الوصول إلى الموقع الإلكتروني على جهاز Android. على سبيل المثال، إذا كنت تريد الوصول إلى الموقع من localhost:5000، فعليك إدخال 5000.

  7. في الحقل النصي عنوان IP والمنفذ على اليسار، أدخِل عنوان IP أو اسم المضيف الذي يتم تشغيل موقعك الإلكتروني عليه على خادم الويب لجهاز التطوير، متبوعًا برقم المنفذ. على سبيل المثال، إذا كان موقعك الإلكتروني يعمل على localhost:5000، عليك إدخال localhost:5000.

  8. انقر على تم.

تم الآن إعداد ميزة إعادة توجيه المنفذ. يمكنك رؤية مؤشر حالة المنفذ للأمام في الجزء العلوي وكذلك إلى جانب اسم الجهاز.

حالة إعادة توجيه المنفذ

لعرض المحتوى، افتح Chrome على جهاز Android وانتقِل إلى منفذ localhost الذي حدّدته في الحقل منفذ الجهاز. على سبيل المثال، إذا أدخلت 5000 في الحقل، ستنتقل إلى localhost:5000.

تعيين إلى النطاقات المحلية المخصصة

يُتيح لك تعيين النطاق الخاص عرض المحتوى على جهاز Android من خادم ويب على جهاز التطوير يستخدم نطاقًا خاصًا.

على سبيل المثال، لنفترض أنّ موقعك الإلكتروني يستخدم مكتبة JavaScript تابعة لجهة خارجية لا تعمل إلا على النطاق chrome.devtools المدرَجة في القائمة المسموح بها. إذًا، تنشئ إدخالاً في ملف hosts على جهاز التطوير لربط هذا النطاق بـ localhost (أي 127.0.0.1 chrome.devtools). وبعد إعداد تعيين النطاق المخصص وإعادة توجيه المنفذ، ستتمكّن من عرض الموقع على جهاز Android على عنوان URL chrome.devtools.

إعداد إعادة توجيه المنفذ إلى الخادم الوكيل

لتعيين نطاق خاص، يجب عليك تشغيل خادم وكيل على جهاز التطوير الذي تستخدمه. ومن أمثلة الخوادم الوكيلة Charles وSquid وFiddler.

لإعداد إعادة توجيه المنفذ إلى خادم وكيل:

  1. شغِّل الخادم الوكيل ولاحظ المنفذ الذي يستخدمه.

  2. إعداد إعادة توجيه المنفذ على جهاز Android بالنسبة إلى حقل العنوان المحلي، أدخل localhost: متبوعًا بالمنفذ الذي يعمل عليه الخادم الوكيل. على سبيل المثال، إذا كانت التجربة تعمل على المنفذ 8000، فعليك إدخال localhost:8000. في حقل منفذ الجهاز، أدخِل الرقم الذي تريد أن يستمع إليه جهاز Android، مثل 3333.

ضبط إعدادات الخادم الوكيل على جهازك

بعد ذلك، يجب إعداد جهاز Android للاتصال بالخادم الوكيل.

  1. على جهاز Android، انتقِل إلى الإعدادات > Wi-Fi.

  2. اضغط مع الاستمرار على اسم الشبكة التي تتصل بها.

  3. انقر على تعديل الشبكة.

  4. انقر على الخيارات المتقدّمة. سيتم عرض إعدادات الخادم الوكيل.

  5. انقر على قائمة الخادم الوكيل وحدِّد يدوي.

  6. بالنسبة إلى حقل اسم مضيف الخادم الوكيل، أدخِل localhost.

  7. بالنسبة إلى حقل منفذ الخادم الوكيل، أدخِل رقم المنفذ الذي أدخلته لمنفذ الجهاز في القسم السابق.

  8. انقر على حفظ.

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

يمكنك الآن الوصول إلى نطاقات مخصصة على جهاز Android الخاص بك تمامًا كما تفعل في جهاز التطوير.

إذا كان خادم الويب يعمل من منفذ غير عادي، تذكر تحديد المنفذ عند طلب المحتوى من جهاز Android. على سبيل المثال، إذا كان خادم الويب يستخدم النطاق المخصص chrome.devtools على المنفذ 7331، فعند عرض الموقع من جهاز Android، يجب أن تستخدم عنوان URL chrome.devtools:7331.