Mengakses server lokal dan instance Chrome dengan penerusan port

Kayce Basques
Meggin Kearney
Meggin Kearney
Sofia Emelianova
Sofia Emelianova
GitHub

Anda dapat menggunakan penerusan port untuk:

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

Dalam Kasus 2, penerusan port berfungsi melalui port TCP yang memproses port di perangkat Android yang memetakan ke port TCP di mesin pengembangan Anda. Lalu lintas antar porta 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. Dalam instance Chrome, Anda melakukan proses debug dengan:

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

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

      Jendela setelan penemuan target.

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

      Link periksa di samping tab pada target jarak jauh.

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

    DevTools dalam mode perangkat.

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

Kasus 2: Menyiapkan penerusan port melalui USB untuk perangkat Android

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

    Perangkat Android dalam daftar.

  2. Pastikan Kotak centang. 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.

    Setelan penerusan porta..

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

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

  7. Di kolom teks alamat IP dan port di sebelah kanan, masukkan alamat IP atau nama host tempat situs Anda berjalan di server web mesin pengembangan, diikuti dengan nomor port. Sebagai misalnya, jika situs Anda berjalan pada localhost:5000, masukkan localhost:5000.

  8. Klik Selesai.

Penerusan port kini sudah disiapkan. Anda juga dapat melihat indikator status penerusan porta di bagian atas selain nama perangkat.

Status penerusan porta.

Untuk melihat konten, buka Chrome di perangkat Android, lalu buka port localhost yang Anda yang ditentukan dalam kolom Port perangkat. Misalnya, jika memasukkan 5000 dalam kolom, Anda akan mengarah ke localhost:5000.

Petakan ke domain lokal kustom

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

Misalnya, situs Anda menggunakan pustaka JavaScript pihak ketiga yang hanya berfungsi di domain yang diizinkan, chrome.devtools. Jadi, Anda membuat entri di file hosts di mesin pengembangan untuk memetakan domain ini ke localhost (yaitu 127.0.0.1 chrome.devtools). Sesudah menyiapkan pemetaan domain kustom dan penerusan port, Anda 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 pada mesin pengembangan. Contoh proxy servernya 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 alamat lokal, masukkan localhost: diikuti dengan port tempat server proxy Anda berjalan. Misalnya, jika yang berjalan pada port 8000, maka Anda harus memasukkan localhost:8000. Di kolom port perangkat masukkan nomor yang Anda inginkan untuk mendengarkan perangkat Android, misalnya 3333.

Mengonfigurasi setelan proxy di perangkat

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

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

  2. Tekan lama nama jaringan yang terhubung dengan Anda.

  3. Ketuk Ubah jaringan.

  4. Ketuk Opsi lanjutan. Tampilan setelan proxy.

  5. Ketuk menu Proxy dan pilih Manual.

  6. Untuk kolom Nama host proxy, masukkan localhost.

  7. Untuk kolom Port proxy, masukkan nomor port yang telah Anda masukkan untuk port perangkat di bagian bagian sebelumnya.

  8. Ketuk Simpan.

Dengan setelan ini, perangkat akan meneruskan semua permintaannya ke proxy pada proses pengembangan Anda mesin Linux dan Windows. Proxy membuat permintaan atas nama perangkat Anda, jadi permintaan ke permintaan lokal domain diselesaikan dengan benar.

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

Jika server web Anda menjalankan port non-standar, ingat untuk menentukan porta meminta konten dari perangkat Android Anda. Misalnya, jika server web Anda menggunakan domain chrome.devtools pada port 7331, saat Anda melihat situs dari perangkat Android, Anda harus menggunakan URL chrome.devtools:7331.