Google I/O 2016 telah berakhir. DevTools memiliki kehadiran yang kuat di I/O, termasuk presentasi oleh Paul Bakaus, Paul Irish, dan Seth Thompson yang menguraikan masa depan DevTools. Tonton video di bawah atau baca terus untuk mempelajari lebih lanjut arah DevTools pada tahun 2016 dan seterusnya.
Pembuatan
DevTools bertujuan untuk mempermudah setiap tahap siklus proses pengembangan web. Anda mungkin tahu bahwa DevTools dapat membantu Anda men-debug atau membuat profil situs, tetapi Anda mungkin tidak tahu cara menggunakannya untuk membantu Anda menulis situs. "Penulisan" adalah tindakan membuat situs. Salah satu sasaran dalam waktu dekat adalah memudahkan Anda melakukan iterasi, bereksperimen, dan mengemulasi situs di beberapa perangkat.
Mode perangkat
Tim DevTools terus melakukan iterasi pada pengalaman Mode Perangkat, yang menerima upgrade utama pertamanya di Chrome 49. Lihat postingan dari bulan Maret (Mode Perangkat baru untuk dunia yang mengutamakan seluler) untuk mengetahui ringkasan update. Tujuan utamanya adalah memberikan alur kerja yang lancar untuk melihat dan mengemulasi situs Anda di semua faktor bentuk.
Berikut ringkasan singkat beberapa update Mode Perangkat yang telah diluncurkan di Canary sejak kami memposting artikel pada bulan Maret.
Saat melihat halaman sebagai perangkat tertentu, Anda dapat lebih tenggelam dalam pengalaman dengan menampilkan hardware perangkat di sekitar halaman.
Menu orientasi perangkat memungkinkan Anda melihat halaman saat berbagai elemen UI sistem, seperti menu navigasi dan keyboard, aktif.
Cerita desktop juga telah ditingkatkan. Berkat fitur zoom Mode Perangkat, Anda dapat mengemulasi layar desktop yang lebih besar dari layar yang sebenarnya Anda gunakan, seperti layar 4K (3840 piksel x 2160 piksel).
Anda dapat membatasi jaringan langsung dari UI Mode Perangkat, tanpa harus beralih ke panel Jaringan.
Perbedaan sumber
Saat Anda melakukan iterasi pada gaya visual situs, Anda akan mudah kehilangan jejak perubahan. Untuk memperbaikinya, DevTools akan menggunakan isyarat visual di gutter nomor baris panel Sumber untuk membantu Anda melacak perubahan. Baris yang dihapus ditunjukkan dengan garis merah, baris yang diubah ditandai dengan warna ungu, dan baris baru ditandai dengan warna hijau.
Anda juga dapat melacak perubahan di tab panel samping Sumber Cepat yang baru:
Untuk pertama kalinya, tab Sumber Cepat memungkinkan Anda berfokus pada kode sumber HTML atau JavaScript sekaligus dengan aturan CSS. Selain itu, saat Anda mengklik properti CSS di panel Gaya, tab Sumber Cepat akan otomatis melompat ke dan menandai definisi di sumber.
Aktifkan eksperimen sumber perbedaan di Chrome Canary untuk mencobanya sekarang.
Pengeditan Sass langsung
Berikut adalah cuplikan beberapa peningkatan besar yang akan datang pada alur kerja pengeditan Sass. Fitur ini masih dalam tahap awal fase eksperimental. Kami akan menghubungi Anda lagi dalam postingan berikutnya saat fitur tersebut siap untuk dicoba.
Pada dasarnya, DevTools akan memungkinkan Anda melihat dan mengedit variabel Sass seperti yang selalu Anda harapkan. Klik nilai yang dikompilasi dari variabel Sass, dan tab Sumber Cepat baru akan langsung membuka definisi variabel.
Saat mengedit nilai yang dikompilasi dari variabel Sass, pengeditan Anda akan memperbarui variabel Sass, bukan hanya properti individual yang Anda pilih.
Progressive web app
Lihat daftar presentasi web dan Chrome di Google I/O 2016 dan Anda akan melihat tema besar yang muncul di dunia pengembangan web: Progressive Web App.
Seiring munculnya model Progressive Web App, DevTools melakukan iterasi dengan cepat untuk menyediakan alat yang diperlukan developer guna membuat progressive web app yang bagus. Kami menyadari bahwa mem-build dan men-debug aplikasi modern ini sering kali memiliki persyaratan unik, sehingga DevTools telah menyediakan seluruh panel untuk pengembangan Progressive Web Application. Buka Chrome Canary dan Anda akan melihat bahwa panel Resource telah diganti dengan panel Application. Semua fungsi sebelumnya dari panel Referensi masih ada. Hanya ada beberapa panel baru yang dirancang khusus untuk pengembangan Progressive Web App:
Panel Manifes memberi Anda representasi visual file manifes aplikasi. Dari sini, Anda dapat memicu alur kerja "Tambahkan ke layar utama" secara manual.
Panel Pekerja Layanan memungkinkan Anda memeriksa dan berinteraksi dengan pekerja layanan yang terdaftar untuk halaman saat ini.
Selain itu, panel Hapus Penyimpanan memungkinkan Anda menghapus semua jenis data sehingga Anda dapat melihat halaman dengan bersih.
JavaScript
Melintasi batas antara frontend dan backend adalah bagian yang sulit dari pengembangan web full stack. Jika Anda menemukan bahwa backend menampilkan kode status 500 saat men-debug aplikasi web, Anda telah mencapai batas kegunaan DevTools secara efektif, sehingga Anda harus mengubah konteks dan mengaktifkan lingkungan pengembangan backend untuk men-debug masalah tersebut.
Namun, dengan backend yang ditulis di Node.js, batasan antara frontend dan backend mulai kabur. Karena Node.js berjalan di mesin JavaScript V8 (mesin yang sama yang mendukung Google Chrome), kami ingin memungkinkan proses debug Node.js dari DevTools. Berkat tim V8, DevTools, dan Google Cloud Platform untuk Node.js, kini Anda dapat menggunakan semua fitur proses debug DevTools yang canggih untuk melakukan introspeksi aplikasi Node.js. Fungsi ini telah mencapai build malam Node.js, meskipun integrasi DevTools masih dioptimalkan sebelum disertakan dalam rilis utama. Men-debug aplikasi Node.js dari DevTools suatu saat akan semudah meneruskan node --inspect app.js dan terhubung dari DevTools di jendela Chrome mana pun.
Meskipun alat yang ada seperti Node Inspector memberikan pengalaman proses debug berbasis GUI, integrasi Node.js DevTools baru akan tetap diperbarui dengan fitur proses debug terbaru DevTools, seperti proses debug stack asinkron, blackboxing, dan dukungan ES6.