Yang Baru di DevTools (Chrome 67)

Kayce Basques

Fitur baru dan perubahan besar yang akan hadir di DevTools di Chrome 67 meliputi:

Versi video catatan rilis:

Buka panel Jaringan, lalu tekan Command+F (Mac) atau Control+F (Windows, Linux, ChromeOS) untuk membuka panel Penelusuran Jaringan baru. DevTools menelusuri header dan isi semua permintaan jaringan untuk kueri yang Anda berikan.

Menelusuri teks 'cache-control' dengan panel Penelusuran Jaringan yang baru.

Gambar 1. Menelusuri teks cache-control dengan panel Penelusuran Jaringan yang baru

Klik Cocokkan Huruf Cocokkan Huruf Besar/Kecil untuk membuat kueri Anda peka huruf besar/kecil. Klik Gunakan Ekspresi Reguler Gunakan Regular Expression untuk menampilkan hasil yang cocok dengan pola yang Anda berikan. Anda tidak perlu menggabungkan RegEx dengan garis miring.

Kueri ekspresi reguler di panel Penelusuran Jaringan.

Gambar 2. Kueri ekspresi reguler di panel Penelusuran Jaringan.

UI panel Penelusuran Global kini cocok dengan UI panel Penelusuran Jaringan baru. Sekarang, hasil juga dicetak dengan rapi untuk membantu pemindaian.

UI lama dan baru.

Gambar 3. UI lama di sebelah kiri, dan UI baru di sebelah kanan

Tekan Command+Option+F (Mac) atau Control+Shift+F (Windows, Linux, ChromeOS) untuk membuka Penelusuran Global. Anda juga dapat membukanya melalui Menu Perintah.

Pratinjau nilai variabel CSS di panel Styles

Saat nilai properti warna CSS, seperti background-color atau color, ditetapkan ke variabel CSS, DevTools kini menampilkan pratinjau warna tersebut.

Contoh nilai warna variabel CSS.

Gambar 4. Di UI lama di sebelah kiri, tidak ada pratinjau warna di samping color: var(--main-color), sedangkan di UI baru di sebelah kanan, ada

Salin sebagai ambil

Klik kanan permintaan jaringan, lalu pilih Salin > Salin Sebagai Pengambilan untuk menyalin kode yang setara dengan fetch() untuk permintaan tersebut ke papan klip Anda.

Menyalin kode yang setara dengan fetch() untuk permintaan.

Gambar 5. Menyalin kode setara fetch() untuk permintaan

DevTools menghasilkan kode seperti berikut:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

Pembaruan panel Audit

Audit baru

Panel Audit memiliki 2 audit baru, termasuk:

  • Pramuat permintaan kunci. Permintaan pramuat dapat mempercepat waktu pemuatan halaman dengan memberikan petunjuk kepada browser untuk mendownload resource yang penting untuk Jalur Rendering Penting Anda sesegera mungkin.
  • Hindari teks yang tidak terlihat saat font web dimuat. Memastikan teks terlihat saat font web dimuat membuat halaman lebih berguna bagi pengguna dengan lebih cepat.

Opsi konfigurasi baru

Anda kini dapat mengonfigurasi panel Audit untuk:

  • Mempertahankan setelan viewport desktop dan agen pengguna. Dengan kata lain, Anda dapat mencegah panel Audit menyimulasikan perangkat seluler.
  • Menonaktifkan throttling jaringan dan CPU.
  • Mempertahankan penyimpanan, seperti LocalStorage dan IndexedDB, di seluruh audit.

Opsi konfigurasi audit baru.

Gambar 6. Opsi konfigurasi audit baru

Lihat jejak

Setelah mengaudit halaman, klik Lihat Trace untuk melihat data performa pemuatan yang menjadi dasar audit Anda di panel Performa.

Tombol Lihat Trace.

Gambar 7. Tombol Lihat Trace

Menghentikan loop tanpa batas

Jika sering menggunakan loop for, loop do...while, atau rekursi, Anda mungkin telah menjalankan loop tak terbatas secara tidak sengaja saat mengembangkan situs. Untuk menghentikan loop tanpa akhir, Anda kini dapat:

  1. Buka panel Sources.
  2. Klik Pause Jeda. Tombol akan berubah menjadi Resume Script Execution Lanjutkan.
  3. Tahan Lanjutkan Eksekusi Skrip Lanjutkan, lalu pilih Hentikan Panggilan JavaScript Saat Ini Hentikan.

Dalam video di atas, jam diperbarui melalui timer setInterval(). Mengklik Start Infinite Loop akan menjalankan loop do...while yang tidak pernah berhenti. Interval dilanjutkan karena tidak berjalan saat Stop Current JavaScript Call Hentikan dipilih.

Waktu Pengguna di tab Performa

Saat melihat rekaman Performa, klik bagian User Timing untuk melihat pengukuran User Timing di tab Ringkasan, Bottom-Up, Call Tree, dan Event Log.

Melihat pengukuran Waktu Pengguna di tab Bottom-Up.

Gambar 8. Melihat pengukuran Waktu Pengguna di tab Bottom-Up. Batang biru di sebelah kiri bagian User Timing menunjukkan bahwa bagian tersebut dipilih.

Secara umum, Anda kini dapat memilih salah satu bagian (Main Thread, User Timing, GPU, ScriptStreamer, dan sebagainya) dan melihat aktivitas bagian tersebut di tab.

Memilih instance JavaScript VM di panel Memori

Panel Memory kini mencantumkan semua instance VM JavaScript yang terkait dengan halaman dengan jelas, bukan menyembunyikannya di balik menu dropdown Target seperti sebelumnya.

Screenshot sebelum dan sesudah panel Memori.

Gambar 9. Di UI lama di sebelah kiri, instance VM JavaScript disembunyikan di balik menu dropdown Target, sedangkan di UI baru di sebelah kanan, instance tersebut ditampilkan di tabel Select JavaScript VM Instance

Di samping instance developers.google.com, terdapat 2 nilai: 8.7 MB dan 13.3 MB. Nilai kiri mewakili memori yang dialokasikan karena JavaScript. Nilai yang tepat mewakili semua memori OS yang dialokasikan karena instance VM tersebut. Nilai kanan mencakup nilai kiri. Di Pengelola Tugas Chrome, nilai kiri sesuai dengan JavaScript Memory dan nilai kanan sesuai dengan Memory Footprint.

Tab Jaringan diganti namanya menjadi tab Halaman

Di panel Sumber, tab Jaringan kini disebut tab Halaman.

Dua jendela DevTools berdampingan, yang menunjukkan perubahan nama.

Gambar 10. Di UI lama di sebelah kiri, tab yang menampilkan resource halaman disebut Jaringan, sedangkan di UI baru di sebelah kanan disebut Halaman

Update tema gelap

Chrome 67 dilengkapi dengan sejumlah perubahan kecil pada skema warna tema gelap. Misalnya, ikon titik henti sementara dan baris eksekusi saat ini kini berwarna hijau.

Screenshot ikon titik henti sementara baru dan skema warna baris eksekusi saat ini.

Gambar 11. Screenshot ikon titik henti sementara baru dan skema warna baris eksekusi saat ini

Transparansi sertifikat di panel Keamanan

Panel Keamanan kini melaporkan informasi transparansi sertifikat.

Informasi transparansi sertifikat di panel Keamanan.

Gambar 12. Informasi transparansi sertifikasi di panel Keamanan

Isolasi Situs di panel Performa

Jika Anda telah mengaktifkan Site Isolation, panel Performance kini menyediakan diagram api untuk setiap proses sehingga Anda dapat melihat total pekerjaan yang disebabkan oleh setiap proses.

Diagram api per proses dalam rekaman Performa.

Gambar 13. Flame chart per proses dalam rekaman Performa

Mendownload saluran pratinjau

Sebaiknya gunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.

Yang baru di DevTools

Daftar semua yang telah dibahas dalam seri Yang baru di DevTools.