Cara men-debug halaman web di chrome untuk android di komputer

Sebagai administrator sebuah blog, saya men-debug situs web pribadi saya menggunakan Chrome untuk melihat bagaimana perubahan dalam tema dan CSS akan terlihat sebelum menerapkannya secara permanen di server. Saya belum lama berselang ketika saya tidak pernah memperhatikan halaman ponsel karena hanya beberapa pengunjung yang mengunjungi situs saya menggunakan smartphone. Tetapi hari ini, sejumlah besar pengunjung terdiri dari smartphone dan tablet, dan karenanya menjadi perlu untuk menjaga penampilan dan presentasi di sana juga.

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

Debugging Halaman Web

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

Untuk pertama kalinya Anda menjalankan Android SDK di komputer Anda, ia akan meminta Anda untuk mengunduh beberapa API dan alat. Jika satu-satunya tujuan Anda menginstal Android SDK adalah untuk debug halaman, hapus centang semuanya kecuali Android SDK Platform-tools dan klik tombol Install Package.

Langkah 2: Setelah menginstal alat platform Android, buka Run Box (Windows + R) dan jalankan % 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 Jalankan dan menavigasi ke folder secara manual.

Langkah 4: Setelah melakukannya, buka Chrome di ponsel Android Anda, buka Pengaturan-> Alat pengembang dan centang opsi Aktifkan debugging Web USB.

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

Langkah 6: Buka halaman yang ingin Anda debug pada browser Chrome Android Anda dan buka URL localhost: 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 debugging yang Anda buat di komputer secara 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 mengkonfigurasi halaman web saya dan itu berhasil seperti pesona. Namun, jika Anda tahu cara yang lebih baik untuk men-debug halaman web ponsel cerdas di komputer, bagikan dengan kami.