גישה לשרתים מקומיים ולמכונות 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. לוחצים על Configure לצד תיבת הסימון.

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

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

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

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

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

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

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

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

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

    מכשיר Android ברשימה.

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

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

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

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

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

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

  7. בשדה הטקסט כתובת IP ויציאה שמשמאל, מזינים את כתובת ה-IP או שם המארח שבהם האתר פועל בשרת האינטרנט של מכונת הפיתוח, ואחריו את מספר היציאה. לדוגמה, אם האתר שלכם פועל ב-localhost:5000, מזינים localhost:5000.

  8. לוחצים על סיום.

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

סטטוס ההעברה ליציאה אחרת.

כדי להציג את התוכן, פותחים את Chrome במכשיר Android ועוברים לשקע localhost שציינתם בשדה Device port. לדוגמה, אם מזינים 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. בשדה device port מזינים את המספר שאליו רוצים שמכשיר Android יקשיב, למשל 3333.

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

בשלב הבא צריך להגדיר את מכשיר Android כך שיהיה באפשרותו לתקשר עם שרת ה-proxy.

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

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

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

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

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

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

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

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

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

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

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