Yang Baru di DevTools (Chrome 115)

Sofia Emelianova
Sofia Emelianova

Peningkatan elemen

Badge subkisi CSS baru

Panel Elemen mendapatkan badge subgrid baru untuk subgrid. Fitur ini masih bersifat eksperimental di Chrome Canary.

Untuk memeriksa dan men-debug petak bertingkat yang merupakan subgrid, sehingga mewarisi jumlah dan ukuran trek dari induknya, klik badge. Fungsi ini membuat overlay yang menampilkan kolom, baris, dan angkanya di atas elemen di area pandang.

Badge subgrid dan overlay di area pandang.

Untuk mengetahui daftar semua badge di panel Elemen, lihat Referensi badge.

Masalah Chromium: 1442536.

Kekhususan pemilih dalam tooltip

Di Elemen > Gaya, arahkan kursor ke nama pemilih untuk melihat bobot kekhususannya dalam tooltip.

Tooltip dengan bobot kekhususan pemilih.

Masalah Chromium: 1204932.

Nilai properti CSS kustom dalam tooltip

Di Elemen > Gaya, arahkan kursor ke nama properti CSS kustom untuk melihat nilainya dalam tooltip.

Tooltip dengan nilai properti CSS kustom.

Tim DevTools ingin mengucapkan terima kasih kepada Gambar 丝 dan Suyan atas masukannya atas peningkatan ini.

Masalah Chromium: 1380779.

Peningkatan sumber

Penandaan sintaksis CSS

Panel Sumber mendapatkan hal berikut untuk file CSS yang telah diproses sebelumnya, seperti SASS, SCSS, dan LESS:

  • Penyorotan sintaksis.
  • Dukungan editor inline. Editor ini mirip dengan editor di Elemen > Gaya, misalnya, Pemilih Warna dan Editor Easing.

Peningkatan penyorotan sintaksis CSS dan dukungan editor inline di Sumber.

Masalah Chromium: 1302261, 1392085.

Pintasan untuk menetapkan titik henti sementara bersyarat

Kini Anda dapat menetapkan titik henti sementara bersyarat lebih cepat dengan pintasan. Untuk membuka dialog titik henti sementara, tahan Command (MacOS) atau Control (Windows / Linux), lalu klik nomor baris di kolom sebelah kiri Sources > Editor.

Nomor baris di kolom sebelah kiri dan dialog titik henti sementara.

Masalah Chromium: 1405767.

Aplikasi > Mitigasi Pelacakan Kembali

Eksperimen Mitigasi Pelacakan Kembali di Chrome memungkinkan Anda mengidentifikasi dan menghapus status situs yang tampak melakukan pelacakan lintas situs menggunakan teknik pelacakan kembali. Panel Aplikasi > Layanan Latar Belakang mendapatkan tab Mitigasi Pelacakan Kembali baru yang memungkinkan Anda memaksa pelacakan mitigasi secara manual dan mencantumkan situs yang statusnya dihapus.

Lihat fitur keamanan ini:

  1. Blokir cookie pihak ketiga di Chrome. Buka dan aktifkan Menu tiga titik. > Setelan > Keamanan. Privasi dan keamanan > Cookie dan data situs lainnya > Tombol pilihan dicentang. Blokir cookie pihak ketiga.
  2. Di chrome://flags, tetapkan eksperimen Mitigasi Pelacakan Kembali ke Diaktifkan Dengan Penghapusan.
  3. Periksa halaman demo ini, buka Aplikasi > Layanan Latar Belakang > Mitigasi Pelacakan Pantulan, klik link pantulan di halaman, tunggu (10 detik) agar Chrome merekam pantulan, lalu klik Paksa jalankan untuk segera menghapus status.

Mitigasi Pelacakan Kembali mencantumkan penghapusan status.

Selain itu, tab Masalah akan memperingatkan Anda tentang penghapusan status mendatang.

Masalah Chromium: 1432303.

Mercusuar 10.2.0

Panel Lighthouse kini menjalankan Lighthouse 10.2.0. Terutama, pemeriksaan Largest Contentful Paint mendapatkan tabel dengan penghitungan fase untuk simulasi dan throttling DevTools. Lihat juga daftar lengkap perubahan.

Tabel fase LCP.

Untuk mempelajari dasar-dasar penggunaan panel Lighthouse di DevTools, lihat Lighthouse: Mengoptimalkan kecepatan situs.

Masalah Chromium: 772558.

Abaikan skrip konten secara default

Setelan. Setelan > Daftar Abaikan > Kotak centang. Skrip konten yang dimasukkan oleh ekstensi kini diaktifkan secara default.

Dengan mengaktifkan setelan ini:

  • Debugger mengabaikan skrip tersebut dan tidak berhenti pada pengecualian yang ditampilkan oleh skrip tersebut.
  • Panel Sources > Call Stack melewati frame yang diabaikan. Untuk menonaktifkan opsi lewati di sini, centang Kotak centang. Tampilkan frame dalam daftar yang diabaikan.
  • Konsol menciutkan frame yang diabaikan dalam pelacakan tumpukan. Klik Tampilkan N bingkai lainnya untuk meluaskan, dan Tampilkan lebih sedikit untuk menciutkan kembali.

Skrip konten yang dimasukkan oleh ekstensi diaktifkan secara default. Temukan ini dengan membuka Setelan, lalu Abaikan daftar.

Selain itu, kotak centang di Ignore List mendapatkan teks yang lebih jelas.

Masalah Chromium: 1440958, 1364501.

Network > Respons cukup-cetak secara default

Panel Network > Response kini mencetak isi respons yang diminifikasi secara default, mirip dengan panel Sources.

Mengaktifkan cantik-printing di jendela Response tab Network.

Selain itu, file SVG mendapatkan penyorotan sintaksis.

penyorotan sintaksis SVG.

Masalah Chromium: 1382752, 1385374.

Sorotan lain-lain

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Setelan. Setelan > Perangkat: Menambahkan Facebook untuk Android v407 di Pixel 6 ke daftar string agen.
  • Jaringan: Menambahkan pintasan Clear network log (1444991):
    • MacOS: Command + K
    • Windows/Linux: Control + L
  • Menghapus opsi drop-down Recorder > Recording N > Performance insights panel (1414773).
  • Stylesheet yang gagal dimuat kini disembunyikan dari hierarki navigator (1386059).
  • Performa: Memperbaiki kesalahan tampilan jalur Interactions yang dapat diperluas (1432510).
  • Elemen: Stylesheet yang gagal dimuat kini diberi garis bawah dengan garis bergelombang (1440626).
  • Debugger tidak otomatis berjalan di WebAssembly jika tidak ada plugin untuk masing-masing bahasa (1443342).
  • Pintasan yang memindahkan kursor satu kata dalam satu waktu akan dipulihkan untuk file CSS di Sumber > Editor (1241848):
    • MacOS: Alt + Panah
    • Windows/Linux: Ctrl + Panah

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