Google I/O 2016 telah berakhir. DevTools memiliki kehadiran yang kuat di I/O, termasuk pembicaraan oleh Paul Bakaus, Paul Irish, dan Seth Thompson yang menjelaskan masa depan DevTools. Lihat video di bawah ini atau baca terus untuk mempelajari lebih lanjut tentang tujuan DevTools pada tahun 2016 dan seterusnya.
Pembuatan
DevTools bertujuan untuk mempermudah setiap tahap siklus proses pengembangan web. Anda mungkin mengetahui bahwa DevTools dapat membantu Anda men-debug atau membuat profil situs, namun Anda mungkin tidak tahu cara menggunakannya untuk membantu Anda menulis situs. "penulisan" yang kami maksud adalah tindakan membuat situs. Salah satu sasaran ke depannya adalah mempermudah Anda melakukan iterasi, bereksperimen, dan mengemulasi situs di berbagai perangkat.
Mode perangkat
Tim DevTools terus melakukan iterasi pengalaman Mode Perangkat, yang menerima upgrade besar pertamanya di Chrome 49. Lihat postingan dari bulan Maret (Mode Perangkat baru untuk dunia yang mengutamakan seluler) untuk mengetahui ringkasan pembaruan. Sasaran keseluruhannya adalah memberikan alur kerja yang lancar untuk melihat dan mengemulasi situs Anda di semua faktor bentuk.
Berikut ringkasan dari beberapa update Mode Perangkat yang tersedia di Canary sejak kami memposting artikel pada bulan Maret.
Saat melihat halaman sebagai perangkat tertentu, Anda dapat lebih terlibat dalam pengalaman ini dengan menampilkan hardware perangkat di sekeliling halaman Anda.
Menu orientasi perangkat memungkinkan Anda melihat halaman saat elemen UI sistem yang berbeda, seperti menu navigasi dan keyboard, sedang aktif.
Pengalaman desktop juga meningkat. Berkat fitur zoom Mode Perangkat, Anda dapat mengemulasikan layar desktop yang lebih besar dari layar yang sedang Anda kerjakan, seperti layar 4K (3840px x 2160px).
Anda dapat membatasi jaringan langsung dari UI Mode Perangkat, daripada harus beralih ke panel Jaringan.
Perbedaan sumber
Saat mengulang gaya situs, Anda akan mudah kehilangan jejak perubahan. Untuk memperbaiki masalah ini, DevTools akan menggunakan isyarat visual pada gutter nomor baris di panel Sumber untuk membantu Anda melacak perubahan. Garis yang dihapus ditunjukkan dengan garis merah, garis yang dimodifikasi ditandai dengan warna ungu, dan baris baru ditandai dengan warna hijau.
Anda juga dapat memantau perubahan di tab panel samping Sumber Cepat yang baru:
Untuk pertama kalinya, tab Sumber Cepat memungkinkan Anda berfokus pada kode sumber HTML atau JavaScript secara bersamaan dengan aturan CSS. Selain itu, saat Anda mengklik properti CSS di panel Styles, tab Quick Source akan otomatis melompat ke dan menandai definisi di sumber.
Aktifkan eksperimen perbedaan sumber di Chrome Canary untuk mencobanya sekarang.
Pengeditan Sass Live
Berikut adalah cuplikan dari beberapa peningkatan besar yang akan datang pada alur kerja pengeditan Sass. Fitur ini masih sangat awal dalam fase eksperimental. Kami akan menindaklanjuti di postingan berikutnya saat mereka sudah siap untuk Anda coba.
Pada dasarnya, DevTools akan memungkinkan Anda melihat dan mengedit variabel Sass seperti yang Anda harapkan. Klik nilai yang dikompilasi dari variabel Sass, dan tab {i>Quick Sources<i} baru akan melompat ke definisi variabel tersebut.
Saat mengedit nilai yang dikompilasi dari variabel Sass, edit Anda akan memperbarui variabel Sass, bukan hanya properti individual yang Anda pilih.
Progressive web app
Lihat daftar perbincangan 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 dibutuhkan developer untuk membuat progressive web app yang bagus. Kami menyadari bahwa membangun dan melakukan proses debug pada aplikasi modern ini sering kali memiliki persyaratan unik, jadi DevTools telah mendedikasikan seluruh panel untuk pengembangan Progressive Web Application. Buka Chrome Canary dan Anda akan melihat bahwa panel Resources telah diganti dengan panel Application. Semua fungsi sebelumnya dari panel Resource masih ada. Ada beberapa panel baru yang dirancang khusus untuk pengembangan Progressive Web App:
Panel Manifest memberi Anda representasi visual dari file manifes aplikasi. Dari sini, Anda dapat memicu alur kerja "Tambahkan ke layar utama" secara manual.
Panel Service Worker memungkinkan Anda memeriksa dan berinteraksi dengan service worker yang terdaftar untuk halaman saat ini.
Dan panel Clear Storage memungkinkan Anda menghapus segala macam data sehingga Anda dapat melihat halaman dengan bersih.
JavaScript
Melewati batas antara frontend dan backend adalah bagian yang sulit dari pengembangan web fullstack. Jika Anda mendapati bahwa backend menampilkan kode status 500 saat men-debug aplikasi web, Anda telah secara efektif mencapai batas kegunaan DevTools, yang mengharuskan Anda mengubah konteks dan mengaktifkan lingkungan pengembangan backend untuk men-debug masalah.
Namun, dengan backend yang ditulis dalam Node.js, batas antara frontend dan backend mulai terlupakan. Karena Node.js berjalan di mesin JavaScript V8 (mesin yang sama dengan yang mendukung Google Chrome), kami ingin memungkinkan debug Node.js dari DevTools. Berkat V8, DevTools, dan Google Cloud Platform untuk tim Node.js, kini Anda dapat menggunakan semua fitur proses debug canggih DevTools untuk memperkenalkan aplikasi Node.js. Fungsi ini telah mencapai build setiap malam Node.js, meskipun integrasi DevTools masih dipoles sebelum disertakan dalam rilis utama. Men-debug aplikasi Node.js Anda dari DevTools suatu hari nanti akan semudah meneruskan node --inspect app.js dan menghubungkan dari DevTools di jendela Chrome mana pun.
Meskipun alat yang sudah ada seperti Node Inspector menyediakan pengalaman proses debug berbasis GUI, integrasi Node.js DevTools yang baru akan tetap diupdate dengan fitur proses debug terbaru dari DevTools, seperti async stack debugging, blackboxing, dan dukungan ES6.