Mode Perangkat baru untuk generasi yang mengutamakan perangkat seluler
Kami memperkenalkan Mode Perangkat, cara untuk mengemulasi perangkat dan menggunakan desain responsif, lebih dari setahun yang lalu. Sekarang saatnya untuk upgrade besar pertamanya, dimulai di Chrome 49. Jadi, apa yang baru?
Perangkat seluler menjadi titik awal di Chrome DevTools. Meskipun kami menawarkan cara untuk mengemulasi perangkat seluler sebelumnya, default pengembangannya adalah desktop. Emulasi seluler harus selalu diaktifkan. Setelah penggunaan situs seluler melampaui desktop di banyak tempat, kami juga akan mengubah posisi di DevTools.
Apa yang baru?
Pertama dan terpenting, UI disederhanakan dan menggunakan lebih sedikit ruang. Kami berharap Mode Perangkat baru menjadi mode pengembangan utama bagi sebagian besar pengguna, sehingga desain yang bersih dan sederhana yang memperluas menu navigasi DevTools utama menjadi persyaratan.
Penggaris perangkat quick-jump baru di atas kueri media.
Selain itu, kami telah memusatkan area pandang dan menambahkan penggaris perangkat quick-jump baru di bagian atas, yang sangat membantu saat mendesain secara responsif, yang memberi Anda gambaran tentang ukuran perangkat yang paling umum.
Terakhir, banyak opsi telah dipaketkan atau disembunyikan di balik tombol jika memungkinkan. Opsi komposit baru ini mempermudah beralih antar-mode. Untuk mengalihkan kontrol tertentu atau menyesuaikan pengalaman Anda dengan panel alat, klik ikon menu tiga titik kecil.
Responsif secara default
Panel alat DevTools utama kini diperluas ke sisi kiri jendela browser dan menyertakan alat terpenting untuk mengemulasi berbagai perangkat seluler dan desktop. Anda dapat memilih antara dua mode pengembangan:
- Responsif
- Perangkat Tertentu
Dalam kedua mode tersebut, area pandang berada di jendelanya sendiri yang dapat diubah ukurannya dalam Chrome. Hal ini memiliki keuntungan signifikan karena Anda dapat memaksimalkan jendela browser dan DevTools sesuai keinginan Anda dan tidak perlu berpindah-pindah saat menguji beberapa ukuran halaman dan bolak-balik.
Responsif adalah mode yang sebaiknya Anda gunakan selama iterasi aktif untuk memastikan situs Anda berfungsi di semua jenis perangkat, bukan hanya beberapa perangkat tertentu. Dalam mode ini, handle di samping area pandang dapat diubah ukurannya secara bebas.
Perangkat Tertentu mengacu pada saat Anda memilih perangkat tertentu dan mengunci area pandang ke ukurannya. Hal ini berguna saat Anda ingin melakukan perbaikan akhir dan sentuhan untuk beberapa perangkat populer menjelang peluncuran. Itulah sebabnya kami tidak hanya menampilkan daftar besar semua jenis perangkat di dropdown, tetapi perangkat yang paling populer saat ini. Jika Anda memilih salah satunya, kami akan melakukan yang terbaik untuk membuatnya berperilaku seserupa mungkin dengan yang sebenarnya: Peristiwa sentuh, agen pengguna, area pandang, serta chrome dan UI perangkat (jika tersedia) semuanya diemulasi.
Proses Debug Jarak Jauh Terintegrasi
Emulasi, bahkan yang terbaik yang tersedia, hanya dapat membantu Anda sejauh ini. Ada hal-hal yang tidak dapat dilakukan oleh emulasi saat ini, seperti:
- Periksa apakah tombol cukup besar untuk ibu jari Anda.
- Uji performa situs Anda di ponsel yang lebih lambat.
- Men-debug bug acak dan batasan perangkat tertentu.
Untuk menguji semua skenario ini secara memadai, Anda perlu menguji, bekerja, dan men-debug menggunakan perangkat fisik yang sebenarnya.
Untuk sementara, Anda dapat membuka chrome://inspect, menghubungkan perangkat melalui
USB, dan membuka sesi proses debug jarak jauh melalui DevTools. Namun, sekarang kita telah mengambil langkah lebih jauh dan memfaktorkan ulang tampilan dan perilaku proses debug jarak jauh, dengan menyematkannya ke dalam inti DevTools. Daripada membuka halaman lain, kini Anda dapat
mengakses Periksa Perangkat sebagai dialog langsung dalam menu utama baru. Hal ini
sangat memudahkan untuk menyertakan proses debug fisik ke dalam alur kerja Anda – cukup
colokkan ponsel, tidak perlu keluar dari DevTools.
Tempat baru untuk kontrol emulasi lainnya
Karena perangkat seluler kini menjadi default di seluruh DevTools, fitur seperti pembatasan jaringan dipindahkan ke tempat yang sesuai, dalam hal ini Panel Jaringan.
Beberapa fitur, seperti emulasi sensor atau setelan rendering seperti mengemulasikan media cetak telah dipindahkan ke tempat yang konsisten di Panel Samping. Anda dapat menemukan semua tambahan di menu utama baru pada bagian "Fitur lainnya".
Kami tahu ini adalah perubahan yang signifikan yang harus kita semua terapkan. Anda akan menemukan cakupan lengkap tentang semua yang ada di dalamnya dalam dokumen Mode Perangkat yang baru saja diperbarui. Kami ingin mendengar pendapat Anda di Twitter atau jika Anda memerlukan lebih dari 140 karakter, di bug tracker kami (ya, bahkan untuk permintaan fitur).