Pengembangan untuk perangkat seluler harus semudah pengembangan untuk desktop. Kami telah bekerja keras di Chrome DevTools untuk memudahkan Anda dan sekarang saatnya untuk meluncurkan beberapa fitur baru yang akan meningkatkan pengembangan web seluler Anda secara drastis. Pertama, proses debug jarak jauh, lalu kita akan mengungkap emulasi seluler yang tepat.
Melakukan screencast layar perangkat ke desktop
Hingga saat ini, saat melakukan proses debug jarak jauh, Anda harus bolak-balik melihat perangkat dan devtools. Sekarang, Screencast menampilkan layar perangkat Anda tepat di samping devtools. Melihatnya memang bagus, tetapi berinteraksi dengannya akan lebih baik:
- Klik pada screencast diterjemahkan menjadi ketukan dan peristiwa sentuh yang tepat diaktifkan di perangkat.
- Memeriksa elemen di perangkat dengan kursor desktop
- Ketik di keyboard desktop Anda--semua penekanan tombol akan dikirim ke perangkat. Sangat menghemat waktu dibandingkan mengetik dengan ibu jari.
- Scroll halaman dengan menggerakkan kursor atau menggeser trackpad laptop.
Dokumentasi lengkap tentang perekaman layar mencakup semua hal ini dan lainnya, seperti mengirim gestur cubit untuk memperbesar. Chrome di Android Beta (m32) diperlukan.
Proses Debug Jarak Jauh yang Mudah
18 bulan yang lalu, Chrome memperkenalkan proses debug jarak jauh yang tepat untuk browser WebKit, tetapi jika Anda mencobanya saat itu, Anda harus menangani download Android SDK sebesar 400 MB, menambahkan biner adb ke $PATH, dan beberapa mantra command line ajaib.
Sekarang, dengan senang hati kami umumkan bahwa Anda dapat melupakan semua itu. Chrome kini dapat menemukan dan berkomunikasi secara native dengan perangkat yang terhubung melalui USB. Kami telah menerapkan protokol adb langsung melalui USB di Chrome, sehingga Anda dapat dengan mudah membuka Menu > Tools > Inspect Devices dan langsung memulai sesi proses debug jarak jauh.
Cara ini berfungsi dengan baik di semua platform, termasuk Chrome OS, meskipun perlu diperhatikan bahwa di Windows, Anda harus menginstal driver USB yang sesuai terlebih dahulu untuk berkomunikasi dengan perangkat. Jika belum pernah mencobanya sebelumnya, Anda juga harus mengaktifkan proses debug USB di perangkat dan mengonfirmasi bahwa Anda menggunakan Chrome untuk Android Beta. Baca dokumentasi lengkapnya.
Port-forward untuk project lokal
Anda mengembangkan di localhost:8000, tetapi ponsel Anda tidak dapat menjangkaunya. Jadi, kami menambahkan penerusan port langsung ke alur kerja proses debug jarak jauh. Sekarang Anda dapat dengan mudah mengerjakan project lengkap, tanpa perlu melakukan hack tunneling. Di about:inspect, klik Port Forwarding untuk menetapkan port yang ingin Anda sediakan, dan port tersebut akan menyala hijau jika sudah siap.
Emulasi Seluler
Anda tidak selalu memiliki perangkat yang diperlukan untuk menguji kompatibilitas, bukan? Meskipun proses debug jarak jauh pada perangkat sebenarnya akan memberi Anda nuansa terbaik untuk performa dan sentuhan, kini Anda dapat mengemulasi banyak karakteristik perangkat secara realistis di desktop, sehingga menghemat waktu dan membuat loop iterasi Anda jauh lebih cepat.
Mengemulasikan ukuran layar, devicePixelRatio, dan <meta viewport> dengan simulasi peristiwa sentuh penuh
Jika Anda telah melihat fitur Metrik Perangkat sebelumnya, fitur yang sekarang tersedia adalah upgrade besar. Tim telah bekerja keras untuk membuat emulasi seluler baru mendapatkan representasi yang mendekati kenyataan dari apa yang akan Anda lihat di perangkat sebenarnya. Misalnya, browser WebKit mempertahankan algoritma pengubahan ukuran teks otomatis yang kompleks dan, pada kenyataannya, setiap perangkat memiliki "faktor penyesuaian" tertentu untuk pengubahan ukuran teks otomatis yang berubah untuk membantu menjaga teks tetap dapat dibaca. Dalam mode emulasi, Anda dapat mengonfirmasi bahwa perilaku ini diterapkan dan melihat hasilnya.
Rasio Piksel Perangkat
Hingga saat ini, hampir tidak mungkin untuk melihat apa yang ditampilkan perangkat hi-DPI di perangkat low-DPI. Sekarang, emulasi dPR di DevTools akan menyesuaikan tampilan Anda agar Anda dapat memperbesar ke dalam skenario DPI yang dalam. Selain itu, Anda dapat mengharapkan window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …), dll. untuk mencerminkan setelan Anda, sehingga Anda dapat melihat cara aplikasi beradaptasi, termasuk memuat aset khusus dpi yang berbeda.
Emulasi perangkat tidak mencakup semua fitur atau bug browser. Jadi, saat mengemulasi iOS, WebGL akan tetap berfungsi dan Anda tidak akan mengalami bug zoom orientasi iOS 5. Untuk mengalami variabilitas tersebut, buka perangkat.
Emulasi <meta viewport> (dan @viewport) yang tepat
Pengujian perilaku yang dilakukan width=device-width dan minimum-scale:1.0 sebelumnya merupakan game khusus perangkat. Sekarang Anda dapat dengan cepat mencoba berbagai area pandang dan mengamati cara rendernya.
Simulasi Peristiwa Sentuh
Setelan emulate touch screen akan memastikan klik Anda ditafsirkan sebagai touchstart dan seterusnya. Selain itu, peristiwa sintetis seperti zoom, scroll, dan geser akan berfungsi. Untuk melakukan cubit-zoom, cukup shift+tarik atau shift+scroll untuk memperbesar konten. Anda akan mendapatkan tampilan yang bagus tentang penskalaan konten di luar area pandang.
Terakhir, spoofing agen pengguna (baik di header permintaan maupun level window.navigator), geolokasi, dan emulasi orientasi memungkinkan Anda menjelajahi fungsi penuh perangkat.
Setelan Default Perangkat
Dengan preset emulasi, Anda dapat memilih ponsel atau tablet dan mendapatkan ukuran layar, dPR, UA yang diterapkan untuk perangkat tersebut, serta peristiwa sentuh penuh dan area pandang yang diemulasi dengan benar. Anda dapat mencoba preset tertentu atau dengan mudah menyesuaikan karakteristik ini satu per satu.
Buka devtools.chrome.com untuk melihat dokumen lengkap tentang Emulasi Seluler dengan DevTools
Demo
Untuk mendapatkan demo lengkap tentang cara kerja semua fitur ini, lihat presentasi saya berdurasi 23 menit dari Chrome Dev Summit tentang DevTools untuk perangkat seluler: