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
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
Dalam instance Chrome, Anda melakukan proses debug dengan:
- Buka
chrome://inspect/#devices
. - Pastikan Discover target network dicentang.
- Klik Konfigurasikan di samping kotak centang.
Di Target discovery settings, masukkan
localhost:PORT
, centang Enable port forwarding, lalu klik Done.Kembali ke Perangkat, Anda akan melihat target jarak jauh baru. Klik inspect di samping tab yang ingin di-debug.
- Buka
Jendela DevTools baru dalam mode perangkat akan terbuka. Di kolom URL di bagian atas, Anda dapat memasukkan alamat situs yang ingin di-debug.
Di samping kolom URL, Anda dapat beralih metode input.
Kasus 2: Menyiapkan penerusan port melalui USB untuk perangkat Android
Siapkan proses debug jarak jauh antara mesin pengembangan dan perangkat Android Anda. Setelah selesai, perangkat Android Anda akan terlihat dalam daftar.
Pastikan Temukan perangkat USB dicentang.
Klik Penerusan port di samping kotak centang.
Di Setelan penerusan port,
localhost:8080
disiapkan secara default. Centang Aktifkan penerusan port..
Jika Anda ingin menyiapkan port lain, ikuti langkah-langkah berikut. Jika tidak, lewati langkah ini dan klik Selesai.
Pada kolom teks Port di sebelah kiri, masukkan nomor port yang Anda inginkan untuk mengakses situs di perangkat Android. Misalnya, jika Anda ingin mengakses situs dari
localhost:5000
, masukkan5000
.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 pada
localhost:5000
, masukkanlocalhost:5000
.Klik Done.
Penerusan port kini sudah disiapkan. Anda dapat melihat indikator status penerusan port di bagian atas serta selain nama perangkat.
Untuk melihat konten, buka Chrome di perangkat Android dan buka port localhost
yang Anda
tentukan di kolom Port perangkat. Misalnya, jika memasukkan 5000
dalam kolom, Anda akan diarahkan ke localhost:5000
.
Petakan ke domain lokal kustom
Pemetaan domain kustom memungkinkan Anda melihat konten di perangkat Android dari server web pada mesin pengembangan yang menggunakan domain kustom.
Misalnya, situs Anda menggunakan library JavaScript pihak ketiga yang hanya berfungsi di domain chrome.devtools
yang diizinkan. Jadi, Anda membuat entri dalam file hosts
di 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 tersebut 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 server proxy adalah Charles, Squid, dan Fiddler.
Untuk menyiapkan penerusan port ke proxy:
Jalankan server proxy dan catat port yang digunakannya.
Siapkan penerusan port ke perangkat Android Anda. Untuk kolom alamat lokal, masukkan
localhost:
diikuti dengan port tempat server proxy Anda berjalan. Misalnya, jika dijalankan pada port8000
, Anda harus memasukkanlocalhost:8000
. Di kolom port perangkat, masukkan nomor yang Anda inginkan untuk pemrosesan perangkat Android, misalnya3333
.
Mengonfigurasi setelan proxy di perangkat
Selanjutnya, Anda perlu mengonfigurasi perangkat Android untuk berkomunikasi dengan server proxy.
- Di perangkat Android, buka Setelan > Wi-Fi.
Tekan lama nama jaringan yang terhubung dengan Anda.
Ketuk Ubah jaringan.
Ketuk Advanced options. Tampilan setelan proxy.
Ketuk menu Proxy dan pilih Manual.
Untuk kolom Nama host proxy, masukkan
localhost
.Untuk kolom Port proxy, masukkan nomor port yang Anda masukkan untuk port perangkat di bagian sebelumnya.
Ketuk Simpan.
Dengan setelan ini, perangkat akan 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 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
pada port 7331
, saat Anda melihat situs dari perangkat Android, Anda harus
menggunakan URL chrome.devtools:7331
.