Yang Baru di DevTools (Chrome 95)

Jecelyn Yeen

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 jenis unit yang digarisbawahi. Klik untuk memilih jenis unit dari dropdown.

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

Anda tetap dapat mengedit nilai unit sebagai teks — cukup klik nilai dan mulai pengeditan.

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 Anda sembunyikan. Klik Opsi lainnya     > Sembunyikan masalah seperti ini.

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

Masalah Chromium: 1175722

Peningkatan tampilan properti

DevTools meningkatkan tampilan properti dengan:

• Selalu menebalkan dan mengurutkan properti sendiri terlebih dahulu di panel Konsol, Sumber, dan Properti.
• Meratakan tampilan properti di panel Properti.

Misalnya, cuplikan di bawah membuat objek URL link dengan 2 properti sendiri: user dan access, serta memperbarui nilai properti yang diwariskan 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 mencatat link di Konsol. Properti milik Anda kini dicetak tebal dan diurutkan terlebih dahulu. Perubahan ini memudahkan untuk melihat properti kustom, terutama untuk Web API (misalnya, URL) dengan banyak properti yang diwariskan.

Selain perubahan ini, properti di panel Properties juga disederhanakan sekarang untuk pengalaman penelusuran bug properti DOM yang lebih baik, terutama untuk Web components.

Masalah Chromium: 1076820, 1119900

Lighthouse 8.4 di panel Lighthouse

Panel Lighthouse kini menjalankan Lighthouse 8.4. Lighthouse kini akan mendeteksi apakah elemen Largest Containful 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.

Masalah Chromium: 772558

Mengurutkan cuplikan di panel Sumber

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

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

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 Apa yang baru.

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

Masalah Chromium: 1246245, 1245481

UI yang ditingkatkan untuk menu perintah DevTools

Apakah Anda kesulitan mencari 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 selengkapnya.

Masalah Chromium: 1201997

Download 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.

• Kirimkan masukan dan permintaan fitur kepada kami di crbug.com.
• Laporkan masalah DevTools menggunakan more_vert Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet di @ChromeDevTools.
• Tinggalkan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.

Yang baru di DevTools

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