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 penampung memberikan pendekatan yang jauh lebih dinamis untuk desain responsif. Aturan @@container berfungsi dengan cara yang serupa dengan kueri media dengan @media. Namun, alih-alih membuat kueri viewport dan agen pengguna untuk mendapatkan informasi, @container membuat kueri penampung induk yang cocok dengan kriteria tertentu.

Di panel Elements, klik elemen DOM dengan aturan @container, DevTools kini menampilkan informasi @container di panel Styles. Klik untuk mengedit ukurannya. 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.

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 Network.

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

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.

Masalah Chromium: 1190735

Penanganan string yang lebih baik di Konsol

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

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 developer merasa bahwa jumlah pelepasan karakter terlalu banyak dan membuat output tidak dapat dibaca.

Konsol kini memformat output string sebagai literal JavaScript yang valid, dan selanjutnya memberi Anda 3 opsi string salin. Opsi Salin sebagai literal JavaScript akan melakukan escape pada karakter khusus yang sesuai dan membungkus string dalam tanda kutip tunggal, tanda kutip ganda, atau tanda petik terbalik, bergantung pada konten string. Salin konten string menyalin konten string mentah (termasuk baris baru dan karakter khusus lainnya) kata demi kata ke papan klip. Terakhir, Salin sebagai literal JSON memformat string sebagai literal JSON yang valid dan menyalinnya ke papan klip.

Masalah Chromium: 1208389

Peningkatan debug CORS

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

Klik dua ikon baru di samping pesan error terkait CORS untuk melihat permintaan jaringan, atau memahami lebih lanjut pesan error dan mendapatkan kemungkinan solusi di tab Masalah.

Masalah Chromium: 1213393

Lighthouse 8.1

Panel Lighthouse kini menjalankan Lighthouse 8.1.

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 saat pemuatan.

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

Kategori Performa mengalami sejumlah perubahan pemberian skor agar selaras dengan alat performa lainnya dan mencerminkan kondisi web dengan lebih baik.

Lihat catatan rilis untuk mengetahui daftar lengkap perubahan.

Masalah Chromium: 772558

Menampilkan URL catatan baru di panel Manifes

Panel Manifest sekarang menampilkan URL catatan baru.

Saat ini di ChromeOS (CrOS), Aplikasi Chrome dan Aplikasi Android yang mendeklarasikan kemampuan "new-note" 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" di palet stilus. Penambahan kolom new-note-url di manifes aplikasi adalah bagian dari upaya untuk menambahkan fungsi yang setara ke aplikasi web.

Masalah Chromium: 1185678

Pemilih yang cocok dengan CSS tetap

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

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

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

Masalah Chromium: 1219153

Mencetak respons JSON dengan rapi di panel Network

Anda kini dapat mencetak respons JSON dengan rapi di panel Network.

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

Bug Chromium: 998674

Download 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, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

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

• Kirimkan masukan dan permintaan fitur kepada kami di crbug.com.
• Laporkan masalah DevTools menggunakan more_vert Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet di @ChromeDevTools.
• Tinggalkan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.

Yang baru di DevTools

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