Yang Baru di DevTools (Chrome 77)

Kayce Basques

Menyalin gaya elemen

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

Menyalin gaya.

Gambar 1. Menyalin gaya elemen.

Terima kasih Adam Argyle dan VisBug atas inspirasi-nya.

Memvisualisasikan perubahan tata letak

Misalnya, 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 menggeser semua konten lainnya ke bawah untuk memberi ruang bagi gambar dan iklan tersebut. Solusinya adalah menggunakan placeholder.

DevTools kini dapat membantu Anda mendeteksi pergeseran tata letak:

  1. Buka Menu Perintah.
  2. Mulai mengetik Rendering.
  3. Jalankan perintah Show Rendering.
  4. Aktifkan kotak centang Layout Shift Regions. 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 Audit

Panel Audit 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. Cegah situs Anda mengalami regresi dari waktu ke waktu dengan menentukan jumlah permintaan dan ukuran file yang tidak boleh dilampaui oleh halaman.
  • Plugin. Perluas Lighthouse dengan audit kustom Anda sendiri.
  • Paket Stack. Menambahkan audit yang disesuaikan dengan stack teknologi tertentu. WordPress Stack Pack dikirim terlebih dahulu. Paket Stack React dan AMP sedang dalam pengembangan.

Sinkronisasi tema OS

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

Pintasan keyboard untuk membuka Editor Titik Henti sementara

Tekan Control+Alt+B atau Command+Option+B (Mac) saat berfokus pada Editor panel Sumber untuk membuka Editor Titik Henti. Gunakan Editor Titik Henti sementara untuk membuat Logpoint dan Titik Henti Sementara Bersyarat.

Editor Titik Henti Sementara.

Gambar 4. Editor Titik Henti Sementara.

Cache pengambilan data di panel Jaringan

Kolom Ukuran di panel Jaringan kini bertuliskan (prefetch cache) saat resource dimuat dari cache pengambilan data. Pengambilan data adalah fitur platform web baru untuk mempercepat pemuatan halaman berikutnya. Dapatkah saya menggunakan... melaporkan bahwa fitur ini didukung di 83,33% browser global mulai 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 Pengambilan Data 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 versi baru di sebelah kanan menampilkannya.

Notifikasi dan pesan push di panel Aplikasi

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

Seperti fitur Pengambilan Latar Belakang dan Sinkronisasi 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 bahkan saat Chrome ditutup.

Panel Notifikasi dan Pesan Push baru.

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

Masalah Chromium #927726

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.