Cara Men-debug Halaman Web di Chrome untuk Android di Komputer

Sebagai administrator blog, saya men-debug situs web pribadi saya menggunakan Chrome untuk melihat bagaimana perubahan pada tema dan CSS akan terlihat sebelum menerapkannya secara permanen di server. Saya belum lama ini ketika saya tidak pernah membayar perhatian ke halaman seluler karena hanya sedikit pengunjung yang mengunjungi situs saya menggunakan smartphone. Tapi hari ini, persentase pengunjung yang signifikan terdiri dari smartphone dan tablet, dan karenanya menjadi penting untuk menjaga penampilan dan presentasi di sana juga.

Jika itu adalah halaman di komputer, seseorang dapat dengan mudah men-debug menggunakan opsi dari menu konteks klik kanan Chrome tetapi itu bukan opsi dengan halaman di seluler. Jadi, hari ini saya akan menunjukkan kepada Anda bagaimana Anda dapat men-debug halaman web seluler di komputer Anda menggunakan Chrome untuk Android dan Android SDK.

Men-debug Halaman Web

Langkah 1: Unduh dan pasang Android SDK di komputer Anda dan jalankan. Pemasang akan meminta Anda untuk mengunduh Java jika Anda belum menginstalnya.

Untuk pertama kali Anda menjalankan Android SDK di komputer Anda, itu akan meminta Anda untuk mengunduh beberapa API dan alat. Jika satu-satunya tujuan Anda menginstal Android SDK adalah untuk men-debug halaman, hapus centang semuanya kecuali Alat Platform Android SDK dan klik Instal Paket tombol.

Langkah 2: Setelah menginstal alat platform Android, buka kotak Jalankan (Windows+R) dan lari %userprofile%\AppData\Local\Android\android-sdk\platform-tools untuk membuka direktori alat platform Android.

Langkah 3: Sekarang tahan tombol Ctrl + Shift dan klik kanan di folder untuk membuka command prompt di sana. Anda juga dapat membuka Command prompt menggunakan kotak Run dan menavigasi ke folder secara manual.

Langkah 4: Setelah melakukan itu, buka Chrome di ponsel Android Anda, buka Pengaturan—>Alat pengembang dan centang opsi Enable USB Web debugging.

Langkah 5: Sekarang pada command prompt jalankan perintah adb forward tcp: 9222 localabstract: chrome_devtools_remote dan buka browser Chrome di Windows pada eksekusi yang berhasil.

Langkah 6: Buka halaman yang ingin Anda debug di browser Chrome Android Anda dan buka URL host lokal: 9222 di browser Chrome komputer Anda.

Itu saja, Anda akan melihat semua halaman yang terbuka di browser Android Anda sebagai thumbnail di komputer Anda. Untuk membuka halaman debug, cukup klik pada thumbnail situs web masing-masing. Anda akan dapat melacak perubahan debug yang Anda buat di komputer langsung di Android secara real-time.

Kesimpulan

Saya yakin trik ini akan membantu banyak pengembang web untuk mengoptimalkan halaman web mereka untuk smartphone. Saya telah menggunakan trik untuk mengonfigurasi halaman web saya dan itu berhasil seperti pesona. Namun, jika Anda mengetahui cara yang lebih baik untuk men-debug halaman web ponsel cerdas di komputer, bagikan dengan kami.