Mengembangkan untuk seluler harus sama mudahnya seperti mengembangkan untuk desktop. Kami telah bekerja keras di Chrome DevTools untuk mempermudah segalanya bagi Anda dan inilah saatnya untuk menyingkap beberapa fitur baru yang akan secara dramatis meningkatkan pengembangan web seluler Anda. Pertama, proses debug jarak jauh, lalu kami akan mengungkap emulasi seluler yang tepat.
Melakukan screencast layar perangkat ke desktop
Hingga saat ini, saat proses debug jarak jauh, Anda harus mengalihkan mata bolak-balik antara perangkat dan devtools. Sekarang, Screencast menampilkan layar perangkat tepat di samping devtools. Melihatnya adalah hal yang baik, 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 pointer desktop
- Ketik di keyboard desktop--semua tombol akan dikirim ke perangkat. Penghematan waktu yang besar dibandingkan mengetik dengan ibu jari.
- Scroll halaman dengan ayunkan jari menggunakan pointer atau geser di trackpad laptop.
Dokumentasi lengkap tentang screencasting mencatat semua hal ini dan lainnya, seperti mengirim gestur cubit untuk mencubit. Chrome di Android Beta (m32) diperlukan.
Proses Debug Jarak Jauh yang Mudah
18 bulan lalu, Chrome memperkenalkan proses debug jarak jauh yang tepat untuk browser WebKit. Namun, jika Anda mencobanya saat itu, Anda harus menangani download SDK Android sebesar 400 MB, menambahkan biner adb ke $PATH Anda, dan beberapa mantra command line ajaib.
Sekarang, dengan senang hati kami umumkan bahwa Anda dapat melupakan hal tersebut. Chrome kini dapat menemukan dan berkomunikasi secara native dengan perangkat yang terhubung ke USB. Kami telah menerapkan protokol adb langsung melalui USB di Chrome, sehingga Anda dapat dengan mudah membuka Menu > Tools > Inspect Devices dan segera memulai sesi proses debug jarak jauh.
Fitur ini berfungsi dengan baik di semua platform, termasuk Chrome OS. Namun, perhatikan bahwa pada Windows, Anda perlu menginstal driver USB yang tepat terlebih dahulu agar dapat berkomunikasi dengan perangkat. Jika belum pernah mencobanya, Anda juga perlu mengaktifkan proses debug USB di perangkat dan mengonfirmasi bahwa Anda menggunakan Chrome untuk Android Beta. Baca dokumen selengkapnya..
Penerusan port untuk project lokal
Anda melakukan pengembangan di localhost:8000, tetapi ponsel Anda tidak dapat menjangkaunya. Jadi, kami menambahkan penerusan porta langsung ke alur kerja proses debug jarak jauh. Sekarang mudah untuk mengerjakan proyek lengkap Anda, tanpa trik terowongan. Di about:inspect, klik Penerusan Port untuk menetapkan port yang Anda inginkan tersedia, dan port tersebut akan menyala hijau jika siap digunakan.
Emulasi Seluler
Anda tidak selalu memiliki perangkat yang diperlukan untuk menguji kompatibilitas, bukan? Meskipun proses debug jarak jauh perangkat sebenarnya akan memberi Anda pengalaman terbaik terkait performa dan sentuhan, Anda kini dapat secara realistis mengemulasikan banyak karakteristik perangkat di desktop, sehingga menghemat waktu dan membuat loop iterasi jauh lebih cepat.
Mengemulasi ukuran layar, devicePixelRatio, dan <meta viewport> dengan simulasi peristiwa sentuh penuh
Jika Anda telah melihat fitur Metrik Perangkat sebelumnya, upgrade yang besar sekarang tersedia. Tim telah bekerja keras untuk membuat emulasi seluler baru mendapatkan representasi yang mendekati realitas dari yang Anda lihat di perangkat sebenarnya. Misalnya, browser WebKit mempertahankan algoritme pengubahan ukuran teks yang rumit, dan faktanya, setiap perangkat memiliki "faktor fudge" spesifik untuk perubahan ukuran otomatis teks agar teks tetap mudah dibaca. Dalam mode emulasi, Anda dapat mengonfirmasi bahwa perilaku ini diterapkan dan melihat hasilnya.
Rasio Piksel Perangkat
Hingga saat ini, hampir mustahil untuk melihat apa yang ditampilkan perangkat hi-DPI di perangkat dengan 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, sehingga Anda dapat melihat cara aplikasi beradaptasi, termasuk memuat berbagai aset khusus dpi.
Emulasi perangkat tidak mencakup semua fitur browser atau bug. Jadi, saat mengemulasi iOS, WebGL akan tetap berfungsi dan Anda tidak akan mengalami bug zoom orientasi iOS 5. Untuk merasakan variabilitas tersebut, buka perangkat.
Emulasi <meta viewport> (dan @viewport) yang tepat
Menguji perilaku 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 cara area pandang 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 akan berfungsi. Untuk mencubit dan memperbesar/memperkecil, cukup shift+tarik atau shift+scroll untuk memperbesar tampilan konten. Anda akan mendapatkan tampilan bagus konten yang diskalakan di luar area pandang.
Terakhir, standby spoofing useragent (baik pada level header permintaan maupun level window.navigator), geolokasi, dan emulasi orientasi memungkinkan Anda menjelajahi fungsi penuh perangkat.
Preset Perangkat
Preset emulasi memungkinkan Anda memilih ponsel atau tablet dan mendapatkan ukuran layar, dPR, UA yang benar yang diterapkan untuk perangkat tersebut, beserta peristiwa sentuh penuh dan area tampilan yang diemulasikan. Anda dapat mencoba preset tertentu atau menyesuaikan karakteristik ini satu per satu dengan mudah.
Buka devtools.chrome.com untuk mendapatkan dokumen lengkap tentang Emulasi Seluler dengan DevTools
Demo
Untuk mendapatkan demo lengkap cara kerja semua fitur ini, lihat diskusi saya selama 23 menit dari Chrome Dev Summit di DevTools untuk seluler: