Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 93)

Jecelyn Yeen

Kueri penampung CSS yang dapat diedit di panel Styles

Sekarang Anda dapat melihat dan mengedit kueri penampung CSS di panel Gaya.

Kueri container memberikan pendekatan yang jauh lebih dinamis untuk desain responsif. @container at-rule berfungsi dengan cara yang mirip dengan kueri media dengan @media. Namun, @container akan mengkueri penampung ancestor yang cocok dengan kriteria tertentu, bukan membuat kueri area pandang dan agen pengguna untuk mendapatkan informasi.

Di panel Elemen, klik elemen DOM dengan aturan @container. Sekarang DevTools menampilkan informasi @container di panel Styles. Klik untuk mengedit ukuran. Panel Styles juga menampilkan informasi penampung yang sesuai. Arahkan kursor ke atasnya untuk menyorot elemen penampung pada halaman dan periksa ukuran penampung. Klik penampung tersebut untuk memilih elemen penampung.

Fitur kueri penampung saat ini bersifat eksperimental. Aktifkan tanda #enable-container-queries di bagian chrome://flags untuk mengujinya.

Kueri penampung CSS yang dapat diedit di panel Styles

Masalah Chromium: 1146422

Pratinjau paket web di panel Jaringan

Paket web adalah format file untuk mengenkapsulasi satu atau beberapa resource HTTP dalam satu file. Sekarang Anda dapat melihat pratinjau konten paket web di panel Jaringan.

Fitur paket web saat ini masih bersifat eksperimental. Aktifkan flag #enable-experimental-web-platform-features di bagian chrome://flags untuk mengujinya.

pratinjau paket web

Masalah Chromium: 1182537

Proses debug Attribution Reporting API

Error Attribution Reporting API kini dilaporkan di tab Masalah.

Attribution Reporting adalah API baru untuk membantu Anda mengukur kapan tindakan pengguna (seperti klik atau penayangan iklan) menghasilkan konversi, tanpa menggunakan ID lintas situs.

Error Attribution Reporting API di tab Masalah

Masalah Chromium: 1190735

Penanganan string yang lebih baik di Konsol

Menu konteks baru di Konsol memungkinkan Anda untuk menyalin string apa pun sebagai konten, literal JavaScript, atau literal JSON.

Di Chrome 90, DevTools memperbarui Konsol untuk selalu memformat output string sebagai literal JSON yang valid. Kami menerima masukan dari developer bahwa perubahan ini dapat membingungkan, beberapa merasa bahwa jumlah escape berlebihan dan membuat output tidak dapat dibaca.

Konsol sekarang memformat output string sebagai literal JavaScript yang valid, dan selanjutnya memberi Anda 3 opsi salin string. Opsi Salin sebagai literal JavaScript akan meng-escape karakter khusus yang sesuai dan menggabungkan string dalam tanda kutip tunggal, tanda kutip ganda, atau tanda kutip tunggal, tergantung pada konten string. Sebaliknya, opsi Copy string contents menyalin konten string mentah (termasuk baris baru dan karakter khusus lainnya) kata demi kata ke papan klip. Terakhir, Copy as JSON literal akan memformat string sebagai literal JSON yang valid dan menyalinnya ke papan klip.

Masalah Chromium: 1208389

Proses debug CORS yang ditingkatkan

TypeError terkait CORS di Konsol kini ditautkan ke panel Jaringan dan tab Masalah.

Klik dua ikon baru di samping pesan error terkait CORS untuk melihat permintaan jaringan, atau pahami pesan error lebih lanjut dan dapatkan kemungkinan solusi di tab Issues.

Ikon di samping pesan error terkait CORS

Masalah Chromium: 1213393

Mercusuar 8.1

Panel Lighthouse sekarang menjalankan Lighthouse 8.1.

Mercusuar

Jika situs Anda mengekspos peta sumber ke Lighthouse, cari tombol View Treemap untuk melihat perincian JavaScript yang dikirimkan, yang dapat difilter menurut ukuran dan cakupan saat dimuat.

Laporan juga berisi filter metrik baru (Lihat filter Menampilkan audit yang relevan di screenshot). Pilih metrik untuk berfokus pada peluang dan diagnostik yang paling relevan dengan peningkatan metrik tersebut.

Kategori Performa memiliki sejumlah perubahan skor agar selaras dengan alat performa lainnya dan untuk lebih mencerminkan status web.

Buka catatan rilis untuk melihat daftar lengkap perubahan.

Masalah Chromium: 772558

Menampilkan URL catatan baru di panel Manifes

Panel Manifes sekarang menampilkan URL catatan baru.

Saat ini di ChromeOS (CrOS), Aplikasi Chrome dan Aplikasi Android yang mendeklarasikan kemampuan "catatan baru" dapat dipilih sebagai aplikasi pencatat di setelan Stilus (akan muncul jika perangkat CrOS telah digunakan dengan stilus). Jika dipilih sebagai aplikasi pencatat, aplikasi dapat diluncurkan dari tombol "Create Note" pada palet stilus. Menambahkan kolom new-note-url di manifes aplikasi adalah bagian dari upaya untuk menambahkan fungsi yang setara ke aplikasi web.

URL catatan baru di panel Manifes

Masalah Chromium: 1185678

Memperbaiki pemilih pencocokan CSS

DevTools memperbaiki pemilih pencocokan CSS, yang tidak berfungsi dalam rilis terakhir.

Pemilih yang dipisahkan koma di panel Gaya diberi warna berbeda bergantung pada apakah pemilih tersebut cocok dengan node DOM yang dipilih:

Bagian yang tidak cocok ditampilkan dengan warna abu-abu muda.
Bagian pemilih yang cocok ditampilkan dengan warna hitam.

Pemilih pencocokan CSS

Masalah Chromium: 1219153

Pretty-printing respons JSON di panel Jaringan

Anda sekarang dapat mencetak respons JSON dengan baik di panel Network.

Buka respons JSON di panel Network, klik ikon {} untuk mencetaknya secara langsung.

Pretty-printing respons JSON di panel Jaringan

Bug Chromium: 998674

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 > Bantuan > Laporkan masalah DevTools di DevTools.
Tweet di @ChromeDevTools.
Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.