Yang Baru di DevTools (Chrome 95)

Jecelyn Yeen

Alat penulisan panjang CSS baru

DevTools menambahkan cara yang lebih mudah namun fleksibel untuk memperbarui panjang dalam CSS!

Di panel Styles, cari properti CSS apa pun yang memiliki panjang (misalnya, height, padding).

Arahkan kursor ke jenis unit, dan perhatikan jenis unitnya digarisbawahi. Klik untuk memilih jenis unit dari menu dropdown.

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

Anda masih dapat mengedit nilai unit sebagai teks — cukup klik nilainya dan mulailah mengedit.

Masalah Chromium: 1126178, 1172993

Sembunyikan 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 sembunyikan masalah

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

Panel masalah tersembunyi

Masalah Chromium: 1175722

Meningkatkan tampilan properti

DevTools meningkatkan tampilan properti dengan:

  • Selalu tebalkan dan urutkan properti sendiri terlebih dahulu di panel Konsol, Sumber, dan Properti.
  • Ratakan tampilan properti di panel Properties.

Misalnya, cuplikan di bawah membuat objek URL link dengan 2 properti 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 logging link di Konsol. Properti sendiri kini dicetak tebal dan diurutkan terlebih dahulu. Perubahan ini mempermudah penemuan properti kustom, terutama untuk Web API (mis. URL) yang memiliki banyak properti yang diwarisi.

Properti sendiri dicetak tebal dan diurutkan terlebih dahulu

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

Properti merata

Masalah Chromium: 1076820, 1119900

Lighthouse 8.4 di panel Lighthouse

Panel Lighthouse sekarang menjalankan Lighthouse 8.4. Lighthouse sekarang akan mendeteksi apakah elemen Largest Containful Paint (LCP) adalah gambar yang lambat dimuat, dan sebaiknya hapus atribut loading dari gambar tersebut.

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

Audit LCP yang lambat dalam laporan Lighthouse

Masalah Chromium: 772558

Mengurutkan cuplikan di panel Sumber

Cuplikan di panel Snippets di bagian panel Sources kini diurutkan menurut abjad. Sebelumnya, data tersebut tidak diurutkan.

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

Mengurutkan cuplikan di panel Sumber

Masalah Chromium: 1243976

Link baru ke terjemahan catatan rilis dan laporkan 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 dengan terjemahan, bantu kami meningkatkannya dengan melaporkan masalah terjemahan melalui Opsi lainnya > Bantuan > Laporkan bug terjemahan.

Link baru ke terjemahan catatan rilis dan laporkan bug terjemahan

Masalah Chromium: 1246245, 1245481

Peningkatan UI untuk menu perintah DevTools

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

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

Peningkatan UI Menu Perintah masih berlangsung, nantikan kabar terbarunya.

Menu Perintah

Masalah Chromium: 1201997

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, menguji API platform web tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan dengan DevTools.

  • Kirim saran atau masukan kepada kami melalui crbug.com.
  • Laporkan masalah DevTools menggunakan Opsi lainnya   Lainnya   > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.

Yang Baru di DevTools

Daftar semua hal yang telah dibahas dalam seri What's New In DevTools.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 dibatalkan.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59