Yang Baru di DevTools (Chrome 95)

Alat penulisan panjang CSS baru

DevTools menambahkan cara yang lebih mudah namun fleksibel untuk memperbarui panjang di CSS.

Di panel Styles, cari properti CSS dengan panjang (misalnya, height, padding).

Arahkan kursor ke jenis unit, dan perhatikan bahwa jenis unit tersebut digarisbawahi. Klik untuk memilih jenis unit dari menu drop-down.

Arahkan kursor ke nilai unit, dan pointer mouse Anda akan berubah menjadi kursor horizontal. Tarik secara horizontal untuk menambah atau mengurangi nilai. Untuk menyesuaikan nilai sebesar 10, tahan tombol Shift saat menarik.

Anda tetap dapat mengedit nilai satuan sebagai teks — cukup klik nilai dan mulai edit.

Masalah Chromium: 1126178, 1172993

Menyembunyikan masalah di tab Masalah

Anda kini dapat menyembunyikan masalah tertentu di tab Masalah untuk berfokus hanya pada masalah yang penting bagi Anda.

Di tab Masalah, arahkan kursor ke masalah yang ingin disembunyikan. Klik Opsi lainnya   Lainnya   > Sembunyikan masalah seperti ini.

Menu untuk menyembunyikan masalah

Semua masalah tersembunyi akan ditambahkan di panel Masalah tersembunyi. Luaskan panel. Anda dapat menampilkan semua masalah tersembunyi atau masalah yang dipilih.

Panel masalah tersembunyi

Masalah Chromium: 1175722

Meningkatkan tampilan properti

DevTools meningkatkan tampilan properti dengan:

  • Selalu cetak tebal dan urutkan properti Anda sendiri terlebih dahulu di panel Konsol, Sumber, dan Properti.
  • Meratakan tampilan properti di panel Properties.

Misalnya, cuplikan di bawah membuat objek URL link dengan 2 propertinya sendiri: user dan access, serta memperbarui nilai properti yang diwarisi search.

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

Coba catat link di Konsol. Properti sendiri kini dicetak tebal dan diurutkan terlebih dahulu. Perubahan ini memudahkan untuk menemukan properti kustom, terutama untuk Web API (misalnya URL) dengan banyak properti yang diwarisi.

Properti sendiri dicetak tebal dan diurutkan terlebih dahulu

Selain perubahan ini, properti di panel Properties juga kini diratakan untuk pengalaman proses debug properti DOM yang lebih baik, terutama untuk Komponen web.

Meratakan properti

Masalah Chromium: 1076820, 1119900

Lighthouse 8.4 di panel Lighthouse

Panel Lighthouse kini menjalankan Lighthouse 8.4. Lighthouse kini akan mendeteksi apakah elemen Largest Contentful Paint (LCP) adalah gambar yang dimuat lambat dan merekomendasikan penghapusan atribut loading darinya.

Lihat Yang baru di Lighthouse 8.4 untuk mengetahui detail selengkapnya tentang update ini.

Audit LCP yang dimuat lambat dalam laporan Lighthouse

Masalah Chromium: 772558

Mengurutkan cuplikan di panel Sumber

Cuplikan di panel Cuplikan pada panel Sumber kini diurutkan menurut abjad. Sebelumnya, data tidak diurutkan.

Manfaatkan fitur cuplikan untuk menjalankan perintah dengan lebih cepat. Tonton video ini untuk mendapatkan tips.

Mengurutkan cuplikan di panel Sumber

Masalah Chromium: 1243976

Link baru ke catatan rilis yang diterjemahkan dan melaporkan bug terjemahan

Anda kini dapat mengklik untuk membaca catatan rilis DevTools dalam 6 bahasa lainnya - Rusia, China, Spanyol, Jepang, Portugis, dan Korea melalui tab Yang baru.

Mulai Chrome 94, Anda dapat menyetel bahasa pilihan di DevTools. Jika Anda menemukan masalah pada terjemahan, bantu kami meningkatkan kualitasnya dengan melaporkan masalah terjemahan melalui Opsi lainnya > Bantuan > Laporkan bug terjemahan.

Link baru ke catatan rilis yang diterjemahkan dan melaporkan bug terjemahan

Masalah Chromium: 1246245, 1245481

UI yang ditingkatkan untuk menu perintah DevTools

Apakah Anda kesulitan menelusuri file di Menu Perintah? Kabar baik untuk Anda, antarmuka pengguna Menu Perintah kini ditingkatkan.

Buka Menu Perintah untuk menelusuri file dengan pintasan keyboard Control+P di Windows dan Linux, atau Command+P di MacOS.

Peningkatan UI Menu Perintah masih berlangsung, nantikan info terbaru lainnya.

Menu Perintah

Masalah Chromium: 1201997

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.