Yang Baru di DevTools (Chrome 93)

Jecelyn Yeen

Kueri penampung CSS yang dapat diedit di panel Gaya

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

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

Di panel Elements, klik elemen DOM dengan aturan at @container, DevTools kini menampilkan informasi @container di panel Styles. Klik untuk mengedit ukuran. Panel Gaya juga menampilkan informasi penampung yang sesuai. Arahkan kursor ke elemen tersebut untuk menandai elemen penampung di halaman dan memeriksa ukuran penampung. Klik 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 Gaya

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 bersifat eksperimental. Aktifkan tanda #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 menyalin string apa pun sebagai konten, literal JavaScript, atau literal JSON.

Menu konteks baru di Konsol

Di Chrome 90, DevTools memperbarui Konsol agar 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 kini memformat output string sebagai literal JavaScript yang valid, dan lebih jauh lagi memberi Anda 3 opsi string salinan. Opsi Salin sebagai literal JavaScript akan meng-escape karakter khusus yang sesuai dan menggabungkan string dalam tanda kutip tunggal, tanda kutip ganda, atau tanda petik terbalik, bergantung pada konten string. Salin konten string akan menyalin konten string mentah (termasuk baris baru dan karakter khusus lainnya) secara verbatim ke papan klip. Terakhir, Salin sebagai literal JSON akan memformat string sebagai literal JSON yang valid dan menyalinnya ke papan klip.

Masalah Chromium: 1208389

Peningkatan proses debug CORS

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 memahami pesan error lebih lanjut dan mendapatkan solusi potensial di tab Masalah.

Ikon di samping pesan error terkait CORS

Masalah Chromium: 1213393

Lighthouse 8.1

Panel Lighthouse kini menjalankan Lighthouse 8.1.

Mercusuar

Jika situs Anda mengekspos peta sumber ke Lighthouse, cari tombol Lihat Peta Hierarki untuk melihat perincian JavaScript yang dikirim, yang dapat difilter menurut ukuran dan cakupan saat dimuat.

Laporan ini juga menyertakan filter metrik baru (Lihat filter Tampilkan audit yang relevan dengan di screenshot). Pilih metrik untuk berfokus pada peluang dan diagnostik yang paling relevan untuk meningkatkan metrik tersebut saja.

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

Lihat catatan rilis untuk mengetahui daftar lengkap perubahan.

Masalah Chromium: 772558

Menampilkan URL catatan baru di panel Manifes

Panel Manifes kini 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 (muncul jika perangkat CrOS telah digunakan dengan stilus). Jika dipilih sebagai aplikasi pencatat, aplikasi dapat diluncurkan dari tombol "Buat Catatan" 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 yang berbeda-beda, bergantung pada apakah pemilih tersebut cocok dengan node DOM yang dipilih:

  • Bagian yang tidak cocok ditampilkan dalam warna abu-abu terang.
  • Bagian pemilih yang cocok ditampilkan dalam warna hitam.

Pemilih pencocokan CSS

Masalah Chromium: 1219153

Mencetak respons JSON dengan format yang baik di panel Jaringan

Sekarang Anda dapat mencetak respons JSON dengan cantik di panel Jaringan.

Buka respons JSON di panel Jaringan, klik ikon {} untuk mencetaknya dengan rapi.

Mencetak respons JSON dengan format yang baik di panel Jaringan

Bug Chromium: 998674

Mendownload saluran pratinjau

Sebaiknya gunakan 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 sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.

Yang baru di DevTools

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