Mode Perangkat baru untuk generasi mobile-first
Kami memperkenalkan Mode Perangkat, cara mengemulasi perangkat dan bekerja dengan desain responsif, lebih dari setahun yang lalu. Sekarang saatnya melakukan upgrade besar yang pertama, mulai dari Chrome 49. Jadi, apa yang baru?
Perangkat seluler menjadi titik awal di Chrome DevTools. Meskipun sebelumnya kami menawarkan cara untuk mengemulasi perangkat seluler, versi default pengembangannya adalah desktop. Emulasi seluler harus selalu diaktifkan. Karena sekarang konsumsi situs seluler telah mengalahkan desktop di banyak tempat, posisi kita di DevTools juga berubah.
Apa yang baru?
Pertama dan yang terpenting, UI-nya disederhanakan dan menggunakan lebih sedikit ruang. Kami berharap Mode Perangkat baru ini akan menjadi mode pengembangan utama bagi sebagian besar pengguna, sehingga desain yang rapi dan sederhana yang memperluas menu navigasi DevTools utama adalah persyaratannya.
Penggaris perangkat lompat cepat yang baru pada kueri media.
Selain itu, kami telah memusatkan area pandang dan menambahkan penggaris perangkat lompat cepat baru di bagian atas, yang sangat membantu saat mendesain secara responsif, sehingga Anda akan tahu ukuran perangkat yang paling umum.
Dan terakhir, banyak opsi telah digabungkan atau disembunyikan di balik tombol jika memungkinkan. Opsi gabungan baru ini mempermudah peralihan antarmode. Untuk beralih kontrol tertentu atau menyesuaikan pengalaman toolbar, klik ikon menu tiga titik kecil.
Responsif secara default
Toolbar utama DevTools kini diperluas ke sisi kiri jendela browser dan menyertakan alat yang paling penting untuk mengemulasi berbagai perangkat seluler dan desktop. Anda dapat memilih antara dua mode pengembangan:
- Responsif
- Perangkat Tertentu
Di kedua mode, area pandang berada di jendelanya sendiri yang dapat diubah ukurannya di dalam Chrome. Hal ini memiliki keuntungan signifikan, yaitu Anda dapat memaksimalkan jendela browser dan DevTools sesuai keinginan Anda dan tidak membuatnya menjadi berantakan saat Anda menguji beberapa ukuran halaman dan bolak-balik.
Responsif adalah mode yang Anda inginkan selama iterasi aktif untuk memastikan situs Anda berfungsi di semua jenis perangkat, bukan hanya beberapa perangkat tertentu. Dalam mode ini, tuas di samping area pandang dapat diubah ukurannya secara bebas.
Perangkat Tertentu mengacu pada saat Anda memilih perangkat tertentu dan mengunci area pandang sesuai ukurannya. Fitur 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 menu dropdown, tapi juga yang paling populer saat ini. Jika Anda memilih salah satunya, kami akan melakukan yang terbaik untuk membuatnya berperilaku serupa dengan transaksi yang sebenarnya: Peristiwa sentuh, agen pengguna, area pandang, dan perangkat chrome serta UI (jika tersedia) semuanya diemulasikan.
Proses Debug Jarak Jauh Terintegrasi
Emulasi, bahkan yang terbaik yang tersedia, hanya dapat membuat Anda sejauh ini. Ada beberapa hal yang tidak dapat dilakukan emulasi saat ini, seperti:
- Periksa apakah tombol cukup besar untuk ibu jari Anda.
- Uji performa situs Anda pada ponsel yang lebih lambat.
- Men-debug keunikan dan batasan acak perangkat tertentu.
Untuk menguji semua skenario ini secara memadai, Anda perlu menguji, bekerja, dan men-debug menggunakan perangkat fisik yang sebenarnya.
Untuk sementara waktu, Anda dapat menjelajahi chrome://inspect, menghubungkan perangkat melalui USB, dan membuka sesi proses debug jarak jauh melalui DevTools. Namun, kita sekarang telah melangkah lebih jauh dan memfaktorkan ulang tampilan dan perilaku proses debug jarak jauh, dengan menyematkannya ke inti DevTools. Daripada membuka halaman lain, kini Anda dapat
mengakses Inspect Devices sebagai dialog langsung di dalam menu utama baru. Hal ini
memudahkan Anda menyertakan proses debug fisik ke dalam alur kerja – cukup
colokkan ponsel dan tidak perlu keluar dari DevTools.
Rumah baru untuk kontrol emulasi sebelumnya
Karena perangkat seluler sekarang menjadi default di DevTools, fitur seperti throttling jaringan dipindahkan ke rumah mereka yang sebenarnya, dalam hal ini Panel Jaringan.
Beberapa fitur, seperti emulasi sensor atau setelan rendering seperti mengemulasi media cetak telah dipindahkan ke tempat yang konsisten di Panel Samping. Anda dapat menemukan semua tambahan di menu utama yang baru di bagian "Alat lainnya".
Kami tahu ini adalah perubahan signifikan yang harus kita pahami terlebih dahulu. Anda akan menemukan liputan lengkap tentang semua yang ada di dalamnya di dokumen Mode Perangkat yang baru saja diperbarui. Kami ingin mendengar pendapat Anda di Twitter atau jika Anda memerlukan lebih dari 140 karakter, di pelacak bug kami (ya, bahkan untuk permintaan fitur).