Yang baru di DevTools, Chrome 143

Update server MCP DevTools

Kami telah melakukan berbagai peningkatan untuk server MCP DevTools dan merilis v0.11.0.

  • Saat memberikan perintah di klien MCP (Gemini CLI, Cursor, ...), Anda kini dapat mereferensikan elemen dan permintaan jaringan yang dipilih di panel Elemen dan Jaringan
  • Alat list_console_messages kini juga menyertakan masalah yang muncul di panel Issues
  • Alat press_key baru kini dapat digunakan untuk men-debug peristiwa keyboard yang tidak terkait dengan elemen formulir
  • Snapshot hierarki aksesibilitas kini dapat disimpan ke disk
  • Halaman kini dapat dimuat ulang, dengan cache yang dapat diabaikan secara opsional
  • Konfigurasi tanda --user-data-dir untuk menggunakan profil Chrome yang ada

Lihat changelog publik di GitHub untuk mengetahui daftar lengkap perubahan dan perbaikan bug, serta pelajari lebih lanjut server MCP DevTools dalam postingan blog pengumuman.

Peningkatan fitur berbagi rekaman aktivitas

Dialog berbagi rekaman aktivitas di panel Performa

Saat mengekspor rekaman aktivitas performa, Anda kini dapat menyertakan data tambahan dalam file yang diekspor untuk mempermudah proses penelusuran bug lebih lanjut untuk Anda di masa mendatang atau rekan kerja. Anda kini dapat memilih untuk menyertakan hal berikut:

  • Konten resource: Salinan semua file HTML, CSS, dan JavaScript (tidak termasuk skrip ekstensi)
  • Peta sumber skrip: Pemetaan ke kode yang ditulis, sehingga Anda dapat melihat nama fungsi dan file sumber asli.

Pelajari apa yang harus dibagikan, dan apa yang sebaiknya dijaga kerahasiaannya di dokumentasi terbaru kami.

Kami ingin berterima kasih kepada rekan-rekan kami di Microsoft yang telah berkolaborasi dengan kami untuk mencapai hal ini, dan yang telah memimpin pekerjaan awal untuk hal ini.

Dukungan untuk @starting-style

Panel Elemen kini memiliki dukungan untuk men-debug aturan CSS @starting-style baru, yang penting untuk membuat animasi masuk.

Sekarang Anda dapat melihat hiasan starting-style di hierarki Elemen di samping elemen yang relevan, mengganti status starting-style elemen dengan mengklik kapsul, serta memeriksa dan men-debug blok @starting-style di tab Gaya.

Widget editor untuk tampilan: masonry

Jika Anda bereksperimen dengan tata letak CSS Masonry, Anda kini dapat menggunakan widget editor yang sama seperti yang sudah dikenal dari tata letak display: flex dan grid untuk beralih dengan cepat ke berbagai opsi perataan dalam tata letak masonry.

Mercusuar 13

Panel Lighthouse kini menjalankan Lighthouse 13. Dengan pencapaian ini, pekerjaan untuk menyatukan insight performa di DevTools dan Lighthouse telah selesai.

Pelajari lebih lanjut di postingan blog pengumuman. Untuk mempelajari kegunaan Lighthouse, dan cara menghubungkannya ke panel Performa di DevTools, lihat Lighthouse: Mengoptimalkan situs Anda.

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.

Yang baru di DevTools

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