Mengakses server lokal dan instance Chrome dengan penerusan port

Kayce Basques
Kayce Basques
Twitter GitHub Glitch
Meggin Kearney
Meggin Kearney
Sofia Emelianova
Sofia Emelianova
GitHub

Anda dapat menggunakan penerusan port untuk:

  • Kasus 1. Lakukan debug pada tab yang dibuka pada instance Chrome lain.
  • Kasus 2. Hosting situs di server web mesin pengembangan, lalu akses kontennya dari perangkat Android melalui kabel USB.

Pada Kasus 2, penerusan port berfungsi melalui port TCP pemroses di perangkat Android yang memetakan ke port TCP di mesin pengembangan Anda. Traffic antar 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 lainnya

  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. Pada instance Chrome, Anda melakukan proses debug dengan:

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

    4. Di Setelan penemuan target, masukkan localhost:PORT, centang Kotak centang. Aktifkan penerusan port, lalu klik Selesai.

      Jendela setelan penemuan target.

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

      Link pemeriksaan di sebelah 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 mengganti 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 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 Enable port forwarding.

    Setelan penerusan port..

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

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

  7. Pada 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. Misalnya, jika situs Anda berjalan di localhost:5000, Anda perlu memasukkan localhost:5000.

  8. Klik Done.

Penerusan port sudah siap. Anda dapat melihat indikator status penerusan port di bagian atas serta selain nama perangkat.

Status penerusan port.

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

Memetakan ke domain lokal kustom

Dengan pemetaan domain kustom, Anda dapat melihat konten di perangkat Android dari server web di mesin pengembangan yang menggunakan domain kustom.

Misalnya, anggaplah situs Anda menggunakan library JavaScript pihak ketiga yang hanya berfungsi di domain chrome.devtools yang diizinkan. Jadi, Anda membuat entri di file hosts pada mesin 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 khusus, 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 alamat lokal, masukkan localhost: diikuti dengan port tempat server proxy Anda berjalan. Misalnya, jika berjalan di port 8000, Anda harus memasukkan localhost:8000. Di kolom port perangkat, masukkan nomor yang ingin Anda dengarkan di perangkat Android, misalnya 3333.

Mengonfigurasi setelan proxy di perangkat Anda

Berikutnya, Anda harus 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 Advanced options. 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 Anda masukkan untuk port perangkat di bagian sebelumnya.

  8. Ketuk Simpan.

Dengan setelan ini, perangkat Anda akan meneruskan semua permintaannya ke proxy di mesin pengembangan Anda. Proxy akan 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 menjalankan 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.