Berita DevTools, yang selalu baru
Item berita pertama dalam postingan ini adalah sebuah meta – pembaruan itu sendiri! Sesekali, tetapi setidaknya sekali sebulan, saya akan merangkum hal-hal yang terjadi di dunia Chrome DevTools, yang baru saja dirilis.
Dan ketika saya mengatakan baru, saya benar-benar serius: Saya akan membahas fitur baru yang baru saja hadir di Chrome Canary, jadi jika Anda lebih suka tetap menggunakan versi stabil, itu juga tidak masalah. Namun, jika Anda berjiwa petualang dan ingin tetap mengungguli, postingan ini cocok untuk Anda. Selain fitur dan perbaikan bug terbaru, Anda akan menemukan bagian Komunitas di akhir setiap postingan, yang menyoroti kontribusi terbaik Anda, pengguna kami yang tercinta.
Tanpa berlama-lama lagi, mari kita bahas berita yang sebenarnya.
Baru di DevTools
Screenshot seperti strip film di Jaringan dan Linimasa
Baru seminggu yang lalu, kami telah memindahkan fitur baru yang signifikan dari tahap eksperimen: Kemampuan untuk mengambil screenshot halaman di tab Jaringan dan Linimasa.
Di Panel jaringan, klik ikon kamera kecil untuk mengaktifkan pengambilan frame, lalu muat ulang halaman untuk memicu pengambilan. Selain screenshot yang diambil dengan alat lain seperti WebPageTest, saat ini kami hanya menampilkan bingkai yang benar-benar berasal dari cat.
Saat mengklik dua kali salah satu frame akan menampilkan tampilan yang diperbesar (lalu gunakan panah kiri/kanan untuk menavigasi), mengarahkan kursor ke frame akan menampilkan garis di seluruh panel dan linimasa untuk memvisualisasikan kapan frame diambil secara tepat, sehingga Anda dapat melakukan korelasi dengan urutan pemuatan. Hal ini membuat proses debug masalah pemuatan umum seperti font web yang memblokir render menjadi jauh lebih sederhana.
Di panel Linimasa, Anda dapat mengaktifkan pengambilan screenshot dengan mengalihkan kotak centang "Screenshot" di toolbar atas. Cara kerjanya sedikit berbeda di sini, dibandingkan dengan panel Jaringan: Dalam hal ini, kita mencoba merekam video sesering mungkin – terlepas dari cat yang sebenarnya – untuk dapat menghapus screenshot tersebut pada skala waktu linear yang berhubungan dengan baris lain di Linimasa. Alih-alih mengklik dua kali untuk menampilkan pratinjau, bingkai yang diperbesar akan muncul saat kursor diarahkan.
Karena keduanya sedikit tidak sinkron dalam hal fungsi dan UX, sebaiknya coba fitur tersebut dan berikan masukan apa pun yang Anda miliki melalui tiket di crbug.com/new atau melalui tweet ke @ChromeDevTools.
Throttling Jaringan di panel Jaringan
Pembatasan jaringan, fitur yang telah kami tambahkan saat memperkenalkan Mode Perangkat, menemukan rumah kedua di toolbar panel Jaringan sehingga Anda dapat berfokus pada pengoptimalan jaringan di satu tempat.
Namun, halaman beranda baru ini hanyalah salinan: Halaman ini masih tersedia di luar Mode Perangkat, karena menyimulasikan konektivitas yang buruk masih sangat penting saat berupaya membuat situs Anda responsif.
Terakhir, apakah Anda salah satu dari orang-orang yang bertanya-tanya mengapa koneksi internet Anda rusak setelah seharian bekerja, hanya untuk mengetahui bahwa Anda lupa menonaktifkan throttling jaringan? Tab panel Jaringan kini menampilkan ikon peringatan saat throttling jaringan diaktifkan.
Berbagai info
- Tidak suka lingkaran aneh di linimasa jaringan? Kami juga. Ini adalah titik waktu saat frame (di strip film baru) diambil. Sekarang, garis tersebut akan muncul saat Anda mengarahkan kursor.
- Mode Perangkat kini mempertahankan orientasi saat Anda beralih antar-perangkat
Detak Jantung Komunitas
Mendalami Chrome DevTools
Bret Little merilis kursus panduan singkat yang bagus ini yang memperkenalkan fungsi dasar DevTools, tetapi juga menawarkan banyak tips dan trik mendalam. Ada info yang sangat berguna di sana, dan dokumen DevTools lainnya tidak akan merugikan.
IDE DevTools…?!
Kenneth Auchenberg, developer web dan penggemar DevTools, mengembangkan aplikasi DevTools mandiri untuk pembuktian konsep beberapa bulan lalu, dan entah bagaimana postingan blognya menjadi berita (peretas) lagi minggu ini.
Mengubah DevTools menjadi IDE yang hebat adalah ide yang menyenangkan, salah satu yang selalu diimpikan oleh banyak anggota tim kami, tetapi ini juga akan menjadi proyek proporsi yang epik.
Bagaimana menurut Anda? Apakah IDE DevTools hanya impian atau Anda dapat melihatnya berfungsi dengan baik? Bagaimana tampilannya? Beri tahu kami melalui komentar.
Sampai jumpa!
Paul Bakaus & tim DevTools