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 aturan berfungsi dengan cara yang mirip dengan kueri media dengan @media. Namun, alih-alih membuat kueri area pandang dan agen pengguna untuk mendapatkan informasi, @container mengkueri penampung ancestor yang cocok dengan kriteria tertentu.

Di panel Elements, klik elemen DOM dengan @container pada aturan, DevTools kini menampilkan informasi @container di panel Styles. Klik tombol tersebut untuk mengedit ukurannya. Panel Gaya juga menampilkan informasi penampung yang sesuai. Arahkan kursor ke atasnya untuk menandai elemen penampung di halaman dan periksa ukuran penampung. Klik elemen tersebut untuk memilih elemen penampung.

Fitur kueri penampung saat ini masih 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. Anda kini 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 menyalin string apa pun sebagai konten, literal JavaScript, atau literal JSON.

Menu konteks baru di Console

Di Chrome 90, DevTools mengupdate Konsol agar selalu memformat output string sebagai literal JSON yang valid. Kami menerima masukan dari developer bahwa perubahan ini bisa membingungkan, sebagian orang merasa bahwa jumlah escaping berlebihan dan membuat output tidak dapat dibaca.

Konsol sekarang memformat output string sebagai literal JavaScript yang valid, dan juga memberi Anda 3 opsi string penyalinan. 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 terbalik, bergantung pada konten string. Salin konten string akan menyalin konten string mentah (termasuk baris baru dan karakter khusus lainnya) kata demi kata ke papan klip. Terakhir, Salin sebagai literal JSON akan memformat string tersebut sebagai literal JSON yang valid dan menyalinnya ke papan klip.

Masalah Chromium: 1208389

Proses debug CORS yang lebih baik

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

Klik dua ikon baru di sebelah pesan error terkait CORS untuk melihat permintaan jaringan, atau pahami pesan error lebih lanjut dan dapatkan solusi potensial 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 Lihat Peta Hierarki untuk melihat perincian JavaScript yang dikirimkan, yang dapat difilter menurut ukuran dan cakupan pemuatan.

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 skor untuk menyelaraskan dengan alat performa lainnya dan untuk lebih mencerminkan status web.

Lihat catatan rilis untuk daftar lengkap perubahan.

Masalah Chromium: 772558

Menampilkan URL catatan baru di panel Manifes

Sekarang panel Manifes menampilkan URL catatan baru.

Saat ini di ChromeOS (CrOS), Aplikasi Chrome, dan Aplikasi Android yang mendeklarasikan "catatan baru" dapat dipilih sebagai aplikasi pencatat di setelan Stilus (muncul jika perangkat CrOS telah digunakan dengan stilus). Saat dipilih sebagai aplikasi pencatat, aplikasi dapat diluncurkan dari "Create Note" palet stilus tombol. 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 pada rilis terakhir.

Pemilih yang dipisahkan koma di panel Styles memiliki warna berbeda, tergantung apakah keduanya 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

Respons JSON yang siap dicetak di panel Jaringan

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

Buka respons JSON di panel Network, klik ikon {} untuk mencetaknya dengan indah.

Respons JSON yang siap dicetak 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 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.
  • Beri 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.