Mengakses server lokal dan instance Chrome dengan penerusan port

Kayce Basques

Meggin Kearney

Sofia Emelianova

Anda dapat menggunakan penerusan port untuk:

• Kasus 1. Men-debug tab yang dibuka di instance Chrome yang berbeda.
• Kasus 2. Menghosting situs di server web mesin pengembangan, lalu mengakses konten dari perangkat Android melalui kabel USB.

Pada Kasus 2, penerusan port berfungsi melalui port TCP yang memproses permintaan di perangkat Android Anda yang dipetakan ke port TCP di mesin pengembangan Anda. Traffic antara port berjalan melalui koneksi USB antara perangkat Android dan mesin pengembangan, sehingga koneksi tidak bergantung pada konfigurasi jaringan Anda.

Selain itu, jika server web Anda menggunakan domain kustom, Anda dapat menyiapkan perangkat Android untuk mengakses konten di domain tersebut dengan pemetaan domain kustom.

Menyiapkan penerusan port

Bergantung pada kasus Anda, ikuti langkah-langkah berikutnya.

Kasus 1: Menyiapkan penerusan port ke instance Chrome lain

1. Jalankan instance Chrome lain dengan parameter --remote-debugging-port=PORT, misalnya:

   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. Di instance Chrome yang Anda gunakan untuk men-debug:

   1. Buka chrome://inspect/#devices.
   2. Pastikan Discover network targets dicentang.
   3. Klik Konfigurasi di samping kotak centang.

   4. Di Target discovery settings, masukkan localhost:PORT, centang Enable port forwarding, lalu klik Done.

      

   5. Kembali di Perangkat, Anda akan melihat target jarak jauh baru. Klik periksa di samping tab yang ingin Anda debug.

      

3. Jendela DevTools baru dalam mode perangkat akan terbuka. Di kolom URL di bagian atas, Anda dapat memasukkan alamat situs yang ingin Anda debug.

   

4. Di samping kolom URL, Anda dapat beralih metode input.

Kasus 2: Menyiapkan penerusan port melalui USB untuk perangkat Android Anda

1. Siapkan proses debug jarak jauh antara mesin pengembangan dan perangkat Android Anda. Setelah selesai, Anda akan melihat perangkat Android Anda dalam daftar.

   

2. Pastikan Temukan perangkat USB dicentang.

3. Klik Penerusan port di samping kotak centang.

4. Di Setelan penerusan port, localhost:8080 disiapkan secara default. Centang Aktifkan penerusan port.

   .

5. Jika Anda ingin menyiapkan port lain, ikuti langkah-langkah berikutnya. Jika tidak, lewati langkah-langkahnya dan klik Selesai.

6. Di kolom teks Port di sebelah kiri, masukkan nomor port yang ingin Anda gunakan untuk dapat mengakses situs di perangkat Android Anda. Misalnya, jika Anda ingin mengakses situs dari localhost:5000, Anda akan memasukkan 5000.

7. Di kolom teks IP address and port di sebelah kanan, masukkan alamat IP atau nama host tempat situs Anda berjalan di server web mesin pengembangan, diikuti dengan nomor port. Misalnya, jika situs Anda berjalan di localhost:5000, Anda akan memasukkan localhost:5000.

8. Klik Selesai.

Penerusan port kini telah disiapkan. Anda juga dapat melihat indikator status penerusan port di bagian atas dan di samping nama perangkat.

Untuk melihat konten, buka Chrome di perangkat Android Anda dan buka port localhost yang Anda tentukan di kolom Port perangkat. Misalnya, jika Anda memasukkan 5000 di kolom, Anda akan membuka localhost:5000.

Memetakan ke domain lokal kustom

Pemetaan domain kustom memungkinkan Anda melihat konten di perangkat Android dari server web di mesin pengembangan yang menggunakan domain kustom.

Misalnya, situs Anda menggunakan library JavaScript pihak ketiga yang hanya berfungsi di domain yang diizinkan chrome.devtools. Jadi, Anda membuat entri di file hosts di komputer pengembangan untuk memetakan domain ini ke localhost (yaitu 127.0.0.1 chrome.devtools). Setelah menyiapkan pemetaan domain kustom dan penerusan port, Anda akan dapat melihat situs di perangkat Android di URL chrome.devtools.

Menyiapkan penerusan port ke server proxy

Untuk memetakan domain kustom, Anda harus menjalankan server proxy di mesin pengembangan. Contoh server proxy adalah Charles, Squid, dan Fiddler.

Untuk menyiapkan penerusan port ke proxy:

1. Jalankan server proxy dan catat port yang digunakannya.

2. Siapkan penerusan port ke perangkat Android Anda. Untuk kolom local address, masukkan localhost: diikuti dengan port tempat server proxy Anda berjalan. Misalnya, jika berjalan di port 8000, Anda akan memasukkan localhost:8000. Di kolom port perangkat masukkan nomor yang Anda inginkan agar didengar perangkat Android Anda, seperti 3333.

Mengonfigurasi setelan proxy di perangkat Anda

Selanjutnya, Anda perlu mengonfigurasi perangkat Android Anda agar dapat berkomunikasi dengan server proxy.

1. Di perangkat Android Anda, buka Setelan > Wi-Fi.

2. Tekan lama nama jaringan yang terhubung dengan perangkat Anda.

3. Ketuk Ubah jaringan.

4. Ketuk Opsi lanjutan. Setelan proxy akan ditampilkan.

5. Ketuk menu Proxy, lalu pilih Manual.

6. Untuk kolom Proxy hostname, masukkan localhost.

7. Untuk kolom Proxy port, masukkan nomor port yang Anda masukkan untuk device port di bagian sebelumnya.

8. Ketuk Simpan.

Dengan setelan ini, perangkat Anda meneruskan semua permintaannya ke proxy di mesin pengembangan Anda. Proxy membuat permintaan atas nama perangkat Anda, sehingga permintaan ke domain lokal yang disesuaikan akan diselesaikan dengan benar.

Sekarang Anda dapat mengakses domain kustom di perangkat Android seperti yang Anda lakukan di mesin pengembangan.

Jika server web Anda berjalan di port non-standar, jangan lupa untuk menentukan port saat meminta konten dari perangkat Android Anda. Misalnya, jika server web Anda menggunakan domain kustom chrome.devtools di port 7331, saat Anda melihat situs dari perangkat Android, Anda harus menggunakan URL chrome.devtools:7331.