Yang Baru di DevTools (Chrome 77)

Kayce Basques
Kayce Basques

Menyalin gaya elemen

Klik kanan node di Pohon DOM untuk menyalin CSS node DOM tersebut ke papan klip Anda.

Menyalin gaya.

Gambar 1. Menyalin gaya elemen.

Terima kasih kepada Adam Argyle dan VisBug atas inspirasinya.

Memvisualisasikan perubahan tata letak

Misalkan Anda sedang membaca artikel berita di situs favorit Anda. Saat membaca halaman, Anda terus kehilangan posisi karena kontennya melompat-lompat. Masalah ini disebut pergeseran tata letak. Hal ini biasanya terjadi saat gambar dan iklan selesai dimuat. Halaman belum mencadangkan ruang untuk gambar dan iklan, sehingga browser harus memindahkan semua konten lainnya ke bawah untuk memberi ruang bagi gambar dan iklan. Solusinya adalah menggunakan placeholder.

DevTools kini dapat membantu Anda mendeteksi perubahan tata letak:

  1. Buka Menu Perintah.
  2. Mulai mengetik Rendering.
  3. Jalankan perintah Show Rendering.
  4. Aktifkan kotak centang Wilayah Pergeseran Tata Letak. Saat Anda berinteraksi dengan halaman, perubahan tata letak akan ditandai dengan warna biru.

Pergeseran tata letak.

Gambar 2. Pergeseran tata letak.

Masalah Chromium #961846

Lighthouse 5.1 di panel Audits

Panel Audits kini menjalankan Lighthouse 5.1. Audit baru mencakup:

UI panel Audit baru.

Gambar 3. UI panel Audit baru.

Versi Node dan CLI Lighthouse 5.1 memiliki 3 fitur utama baru yang patut dicoba:

  • Anggaran Performa. Mencegah situs Anda mengalami regresi seiring waktu dengan menentukan jumlah permintaan dan ukuran file yang tidak boleh dilampaui halaman.
  • Plugin. Perluas Lighthouse dengan audit kustom Anda sendiri.
  • Stack Packs. Menambahkan audit yang disesuaikan dengan stack teknologi tertentu. Paket Stack WordPress dikirim terlebih dahulu. Paket Stack React dan AMP sedang dalam pengembangan.

Sinkronisasi tema OS

Jika Anda menggunakan tema gelap OS, DevTools kini beralih ke tema gelap-nya sendiri secara otomatis.

Pintasan keyboard untuk membuka Editor Titik Henti Proses

Tekan Control+Alt+B atau Command+Option+B (Mac) saat fokus di Editor panel Sources untuk membuka Breakpoint Editor. Gunakan Editor Titik Henti Sementara untuk membuat Logpoint dan Titik Henti Sementara Bersyarat.

Editor Titik Henti Sementara.

Gambar 4. Breakpoint Editor.

Cache pengambilan data di panel Jaringan

Kolom Ukuran di panel Jaringan kini menampilkan (prefetch cache) saat resource dimuat dari cache pengambilan data. Prefetch adalah fitur platform web baru untuk mempercepat pemuatan halaman berikutnya. Laporan Can I use... menunjukkan bahwa laporan tersebut didukung di 83,33% browser global per Juli 2019.

Kolom Ukuran yang menunjukkan bahwa resource berasal dari cache pengambilan data.

Gambar 5. Kolom Ukuran menunjukkan bahwa prefetch2.html dan prefetch2.css berasal dari (prefetch cache).

Lihat Demo Prefetch untuk mencobanya.

Masalah Chromium #935267

Properti pribadi saat melihat objek

Konsol kini menampilkan kolom class pribadi dalam pratinjau objeknya.

Saat memeriksa objek, Konsol kini menampilkan kolom pribadi seperti '#color'.

Gambar 6. Chrome versi lama di sebelah kiri tidak menampilkan kolom #color saat memeriksa objek, sedangkan Chrome versi baru di sebelah kanan menampilkannya.

Notifikasi dan pesan push di panel Aplikasi

Bagian Layanan Latar Belakang di panel Aplikasi kini mendukung Pesan Push dan Notifikasi. Pesan Push terjadi saat server mengirimkan informasi ke pekerja layanan. Notifikasi terjadi saat pekerja layanan atau skrip halaman menampilkan informasi kepada pengguna.

Seperti fitur Pengambilan Data di Latar Belakang dan Sinkronisasi di Latar Belakang dari Chrome 76, setelah Anda mulai merekam, Pesan Push dan Notifikasi di halaman ini akan direkam selama 3 hari, meskipun halaman ditutup, dan meskipun Chrome ditutup.

Panel Notifikasi dan Pesan Push baru.

Gambar 7. Panel Pesan Push dan Notifikasi baru di panel Aplikasi.

Masalah Chromium #927726

Mendownload saluran pratinjau

Pertimbangkan untuk menggunakan 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 Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

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

Yang baru di DevTools

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