Yang Baru di DevTools (Chrome 95)

Jecelyn Yeen

Alat penulisan CSS yang baru

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

Di panel Gaya, cari properti CSS yang memiliki panjang (misalnya, height, padding).

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

Arahkan kursor ke nilai satuan, dan kursor mouse akan diubah menjadi kursor horizontal. Tarik secara horizontal untuk menambah atau mengurangi nilai. Untuk menyesuaikan nilai sebanyak 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

Sekarang Anda 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 bagian panel Masalah tersembunyi. Luaskan panel. Anda dapat memperlihatkan semua masalah tersembunyi atau masalah yang dipilih.

Panel masalah tersembunyi

Masalah Chromium: 1175722

Meningkatkan tampilan properti

DevTools meningkatkan tampilan properti dengan:

  • Selalu tebal dan urutkan properti terlebih dahulu di Konsol, panel Sumber, dan panel 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 sekarang dicetak tebal dan diurutkan terlebih dahulu. Perubahan ini mempermudah identifikasi 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 kini juga diratakan untuk pengalaman proses debug properti DOM yang lebih baik, terutama untuk Web components.

Properti merata

Masalah Chromium: 1076820, 1119900

Lighthouse 8.4 di panel Lighthouse

Panel Lighthouse sekarang menjalankan Lighthouse 8.4. Lighthouse kini akan mendeteksi apakah elemen Largest Containful Paint (LCP) adalah gambar yang dimuat lambat dan merekomendasikan untuk menghapus atribut loading dari gambar tersebut.

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

Audit LCP yang lambat dimuat dalam laporan Lighthouse

Masalah Chromium: 772558

Mengurutkan cuplikan di panel Sumber

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

Memanfaatkan 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 terjemahan dan melaporkan bug terjemahan

Sekarang Anda 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 bisa menyetel bahasa pilihan di DevTools. Jika Anda menemukan masalah terkait terjemahan, bantu kami meningkatkannya dengan melaporkan masalah terjemahan melalui Opsi lainnya > Bantuan > Laporkan bug terjemahan.

Link baru ke catatan rilis terjemahan dan melaporkan bug terjemahan

Masalah Chromium: 1246245, 1245481

UI yang ditingkatkan untuk menu perintah DevTools

Apakah Anda merasa sulit mencari file di Menu Perintah? Kabar baik, antarmuka pengguna Menu Perintah kini telah disempurnakan!

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 kabar terbaru lainnya!

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 mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait 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.
  • Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.

Yang baru di DevTools

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

109 Chrome

Chrome 108

Chrome 107

106 Chrome

105 Chrome

104 Chrome

103 Chrome

102 Chrome

101 Chrome

100 Chrome

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