Pengembangan untuk perangkat seluler harus sama mudahnya dengan pengembangan untuk desktop. Kami telah bekerja keras di Chrome DevTools untuk mempermudah Anda dan sekarang saatnya mengungkap beberapa fitur baru yang secara dramatis akan meningkatkan pengembangan web seluler Anda. Pertama, proses debug jarak jauh, lalu kami akan mengungkap emulasi seluler yang tepat.
Screencast layar perangkat Anda ke desktop
Hingga saat ini, saat proses debug jarak jauh, Anda harus mengalihkan antara perangkat dan devtools. Sekarang, Screencast menampilkan layar perangkat tepat di samping devtools. Terlihat bagus, tetapi berinteraksi dengannya jauh lebih baik:
- Klik pada screencast diterjemahkan menjadi ketukan dan peristiwa sentuh yang tepat akan diaktifkan di perangkat.
- Memeriksa elemen di perangkat dengan pointer desktop
- Ketik di keyboard desktop--semua penekanan tombol akan dikirim ke perangkat. Penghematan waktu yang luar biasa besar saat mengetik dengan ibu jari.
- Scroll halaman dengan melemparnya menggunakan pointer atau hanya menggeser di trackpad laptop.
Dokumentasi lengkap tentang screencasting merekam semua ini dan lainnya, seperti mengirim gestur cubit zoom. Chrome di Android Beta (m32).
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, dengan menambahkan biner adb ke $PATH dan beberapa mantraan command line ajaib.
Sekarang, dengan senang hati kami umumkan bahwa Anda bisa melupakan semua itu. Chrome kini dapat menemukan dan berbicara dengan perangkat yang terhubung ke USB secara native. Kami telah menerapkan protokol adb langsung melalui USB di Chrome, sehingga Anda dapat membuka Menu > Tools > Inspect Devices dengan mudah dan langsung memulai sesi proses debug jarak jauh.
Ini berfungsi dengan baik di semua platform, termasuk Chrome OS. Namun, perlu diperhatikan bahwa di Windows, Anda harus menginstal driver USB yang tepat terlebih dahulu agar dapat berkomunikasi dengan perangkat. Jika belum pernah mencobanya, Anda juga harus mengaktifkan proses debug USB di perangkat dan mengonfirmasi bahwa Anda menggunakan Chrome untuk Android Beta. Baca dokumen lengkapnya..
Port-forward untuk project lokal
Anda melakukan pengembangan di localhost:8000, tetapi ponsel Anda tidak dapat menjangkaunya. Jadi, kami menambahkan penerusan port langsung ke alur kerja proses debug jarak jauh. Sekarang mudah untuk mengerjakan seluruh project Anda, tanpa tips tunneling. Di about:inspect, klik Penerusan Port untuk menetapkan port yang ingin tersedia, dan port tersebut akan menyala hijau jika sudah siap digunakan.
Emulasi Seluler
Anda tidak selalu memiliki perangkat yang perlu diuji kompatibilitasnya, bukan? Meskipun proses debug jarak jauh pada perangkat sungguhan akan memberi Anda kesan terbaik terkait performa dan sentuhan, kini Anda dapat mengemulasi banyak karakteristik perangkat di desktop secara realistis, sehingga menghemat waktu Anda dan membuat loop iterasi Anda jauh lebih cepat.
Emulasi ukuran layar, devicePixelRatio, dan <meta viewport> dengan simulasi peristiwa sentuh penuh
Jika Anda sudah pernah melihat fitur Metrik Perangkat sebelumnya, yang kini tersedia adalah upgrade yang besar. Tim telah bekerja keras untuk membuat emulasi seluler baru mendapatkan representasi yang mendekati realitas dari apa yang akan Anda lihat di perangkat sebenarnya. Misalnya, browser WebKit mempertahankan algoritme pengubahan ukuran teks yang kompleks dan, faktanya, setiap perangkat memiliki "faktor fudge" khusus untuk pengubahan ukuran teks secara otomatis agar teks tetap dapat dibaca. Dalam mode emulasi, Anda dapat mengonfirmasi bahwa perilaku ini sedang diterapkan dan melihat hasilnya.
Rasio Piksel Perangkat
Sampai saat ini, hampir tidak mungkin untuk melihat apa yang ditampilkan perangkat hi-DPI pada perangkat DPI rendah. Sekarang, emulasi dPR di DevTools akan menyesuaikan tampilan agar Anda dapat memperbesar skenario DPI yang mendalam. Selain itu, window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …), dll. akan mencerminkan setelan Anda, sehingga Anda dapat melihat bagaimana aplikasi Anda beradaptasi, termasuk memuat berbagai aset khusus dpi.
Emulasi perangkat tidak memperluas fitur browser atau bug sepenuhnya. Jadi, saat mengemulasi iOS, WebGL akan tetap berfungsi dan Anda tidak akan terkena bug zoom orientasi iOS 5. Untuk merasakan variabilitas tersebut, buka perangkat.
Emulasi <meta viewport> (dan @viewport) yang tepat
Menguji perilaku yang dilakukan width=device-width dan minimum-scale:1.0 sebelumnya merupakan game khusus perangkat. Sekarang Anda dapat dengan cepat mencoba area pandang yang berbeda dan mengamati bagaimana area pandang tersebut dirender.
Simulasi Peristiwa Sentuh
Setelan emulasi layar sentuh akan memastikan klik Anda ditafsirkan sebagai touchstart dan seterusnya. Selain itu, peristiwa sintetis seperti zoom, scroll, dan geser juga akan berfungsi. Untuk mencubit/memperbesar/memperkecil, cukup shift+tarik atau shift+scroll untuk memperbesar tampilan konten. Anda akan mendapatkan tampilan konten yang diskalakan di luar area pandang dengan bagus.
Terakhir, standby spoofing agen pengguna (baik di tingkat header permintaan maupun tingkat window.navigator), geolokasi, dan emulasi orientasi memungkinkan Anda menjelajahi seluruh fungsi perangkat.
Preset Perangkat
Preset emulasi memungkinkan Anda memilih ponsel atau tablet dan mendapatkan ukuran layar yang benar, dPR, UA yang diterapkan untuk perangkat tersebut, beserta peristiwa sentuh penuh dan area pandang yang diemulasikan. Anda dapat mencoba {i>preset<i} 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 semua fitur ini, lihat bincang-bincang selama 23 menit dari Chrome Dev Summit di DevTools untuk seluler: