גישה לשרתים מקומיים ולמכונות Chrome באמצעות העברה ליציאה אחרת

Kayce Basques
Meggin Kearney
Meggin Kearney
Sofia Emelianova
Sofia Emelianova
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. מוודאים שהאפשרות תיבת סימון. יעדי רשת ב-Discover מסומנת.
    3. לוחצים על הגדרה ליד תיבת הסימון.

    4. בקטע Target discovery settings (הגדרות זיהוי היעדים), מזינים localhost:PORT, מסמנים את התיבה תיבת סימון. Enable port forwarding (הפעלת העברת יציאות) ולוחצים על Done (סיום).

      חלון ההגדרות של גילוי היעדים.

    5. בקטע מכשירים יופיע יעד מרוחק חדש. לוחצים על בדיקה לצד הכרטיסייה שרוצים לנפות בה באגים.

      הקישור לבדיקה שליד הכרטיסייה ביעד המרוחק.

  3. ייפתח חלון חדש של DevTools במצב מכשיר. בסרגל הכתובות שבחלק העליון, אפשר להזין את כתובת האתר שרוצים לנפות בו באגים.

    כלי הפיתוח במצב מכשיר.

  4. לצד סרגל הכתובות, אפשר להחליף בין שיטות הקלט.

מקרה 2: הגדרת העברה אוטומטית של יציאות (port forwarding) דרך USB במכשיר Android

  1. אפשר להגדיר ניפוי באגים מרחוק בין מכשיר הפיתוח למכשיר Android. בסיום התהליך, מכשיר ה-Android שלכם אמור להופיע ברשימה.

    מכשיר ה-Android שמופיע ברשימה.

  2. מוודאים שהתיבה תיבת סימון. Discover התקני USB מסומנת.

  3. לוחצים על העברה ליציאה אחרת ליד תיבת הסימון.

  4. בהגדרות של העברה ליציאה אחרת, localhost:8080 מוגדר כברירת מחדל. מסמנים את האפשרות הפעלת העברה ליציאה אחרת.

    הגדרות ההעברה ליציאה אחרת..

  5. אם רוצים להגדיר יציאות אחרות, פועלים לפי השלבים הבאים. אחרת, מדלגים על השלבים ולוחצים על סיום.

  6. בשדה הטקסט Port (יציאה) שמימין, מזינים את מספר היציאה שדרכה רוצים לגשת לאתר במכשיר Android. לדוגמה, אם אתם רוצים לגשת לאתר מ-localhost:5000, צריך להזין 5000.

  7. בשדה הטקסט IP address ו-Port משמאל, מזינים את כתובת ה-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.

הגדרת העברה ליציאה אחרת לשרת proxy

כדי למפות דומיין מותאם אישית, צריך להפעיל שרת proxy במכונה לפיתוח. דוגמאות לשרתי proxy: Charles, Squid ו-Fiddler.

כדי להגדיר העברה ליציאה אחרת לשרת proxy:

  1. מפעילים את שרת ה-Proxy ורושמים את היציאה שבה הוא משתמש.

  2. מגדירים העברה ליציאה אחרת למכשיר Android. בשדה local address, מזינים את הערך localhost: ואחריו את היציאה שבה פועל שרת ה-proxy. לדוגמה, אם הוא פועל ביציאה 8000, מזינים localhost:8000. בשדה יציאת המכשיר מזינים את המספר שרוצים שמכשיר ה-Android יאזין לו, למשל 3333.

הגדרת הגדרות שרת proxy במכשיר

לאחר מכן, עליך להגדיר את מכשיר ה-Android שלך שיתקשר עם שרת ה-proxy.

  1. במכשיר Android, עוברים אל הגדרות > Wi-Fi.

  2. לוחצים לחיצה ארוכה על שם הרשת שאליה אתם מחוברים.

  3. מקישים על שינוי רשת.

  4. מקישים על אפשרויות מתקדמות. ההגדרות לשרת ה-proxy מוצגות.

  5. מקישים על התפריט שרת Proxy ובוחרים באפשרות ידני.

  6. בשדה שם מארח של שרת proxy, מזינים localhost.

  7. בשדה יציאת שרת Proxy, מזינים את מספר היציאה שהזנתם בשדה יציאת המכשיר בקטע הקודם.

  8. מקישים על שמירה.

באמצעות ההגדרות האלה, המכשיר מעביר את כל הבקשות לשרת ה-Proxy במכונת הפיתוח. שרת ה-proxy שולח בקשות בשם המכשיר שלכם, כך שבקשות לדומיין המקומי המותאם אישית מטופלות כמו שצריך.

עכשיו אפשר לגשת לדומיינים מותאמים אישית ב-Android, בדיוק כמו במכונת הפיתוח.

אם בשרת האינטרנט שלכם אין יציאה לא סטנדרטית, זכרו לציין את היציאה כשמבקשים את התוכן ממכשיר Android. לדוגמה, אם שרת האינטרנט משתמש בדומיין המותאם אישית chrome.devtools ביציאה 7331, כשמציגים את האתר ממכשיר Android, צריך להשתמש בכתובת ה-URL chrome.devtools:7331.