Tingkatkan performa alur kerja pengembangan Anda dengan Gemini yang terintegrasi langsung ke Chrome DevTools. Sederhanakan proses proses debug dengan bantuan AI untuk gaya visual, performa, jaringan, dan sumber.

Masalah gaya visual dapat sulit di-debug. Dapatkan penjelasan mendetail tentang gaya elemen Anda dan dapatkan bantuan dalam memperbaiki bug tata letak dan gaya:

Can you center this element?

Header permintaan dan respons sering kali berisi informasi penting yang tidak terlihat sekilas. Gunakan bantuan AI untuk mempelajari:

Why does this request fail?

Anda jarang menulis semua kode di situs Anda - tidak yakin untuk apa skrip tertentu digunakan? Bantuan AI dapat membantu:

What is this file used for?

Data vital web inti buruk? Menemukan akar masalah situs yang lambat bisa jadi sulit. Bantuan AI dapat menyelidiki dan mengusulkan solusi untuk Anda:

Help me optimize my LCP score

Mendapatkan bantuan AI di mana pun Anda berada

Cari tombol Tanya AI untuk mendapatkan bantuan dari Gemini terkait tugas Anda saat ini.

Demo

Lihat demo interaktif kami untuk mempelajari cara memulai bantuan AI dalam project Anda.
Coba perbaikan gaya visual yang didukung AI untuk mengubah bidang statis menjadi keajaiban yang menjulang tinggi - sambil memastikan langkah-langkah keamanan dilakukan.
Apakah Anda akan menaklukkan scrollbar yang mengerikan dengan bantuan AI, atau tim penyelam akan selamanya terjebak dalam mimpi buruk tata letak?

Tidak yakin cara memulainya?

Jelajahi ide perintah untuk bantuan AI di DevTools. Bereksperimenlah dengan demo kami atau coba di situs Anda sendiri.

Memperbaiki rasio aspek gambar

Make all teaser images always be 16:9

Salah satu gambar tidak dipangkas dengan cara yang sama seperti yang lainnya?

  • Buka halaman chrome.dev/cinemai/devtools/ dan buka DevTools.
  • Cari dan pilih bagian Pelajari lebih lanjut dengan menonton.
  • Klik ikon bantuan AI.
  • Perintah: Make all teaser images always be 16:9.
  • Klik Apply the suggested change dan lanjutkan.
  • Tombol harus berada di tengah.

Memperbaiki masalah overflow

How can I make this element visible?

Elemen tidak terlihat?

  • Buka halaman chrome.dev/cinemai/devtools/ dan buka DevTools.
  • Temukan elemen img scuba diver.
  • Klik ikon bantuan AI.
  • Perintah: How can I make this element visible without scrollbars?.
  • Klik Apply the suggested change dan lanjutkan.
  • Penyelam akan terlihat di layar.

Memahami header

Are there any security headers present?

Untuk mempelajari header keamanan resource tertentu lebih lanjut...

  • Buka halaman chrome.dev/cinemai/devtools/ dan buka DevTools.
  • Di panel Jaringan, pilih permintaanv4-chrome.dev.js.
  • Klik ikon bantuan AI.
  • Perintah: Are there any security headers present?
  • LLM akan menjelaskan header yang terkait dengan keamanan di resource.

Pembahasan mendalam

Jelajahi video yang menjelaskan cara menggunakan bantuan AI di DevTools untuk menyelesaikan masalah pengembangan web umum.
Menjelajahi histori chat AI persisten di Chrome 133-135
Bergabunglah dengan Jecelyn, Oliver, dan Matthias saat mereka memperkenalkan bantuan AI di Chrome 130-132

Mulai

Pastikan Anda menggunakan Chrome terbaru dan login. Anda harus berusia minimal 18 tahun dan berada di salah satu lokasi yang didukung.
Bantuan AI dinonaktifkan secara default. Untuk mengaktifkannya, buka bagian Setelan > Bantuan AI. Anda harus menyetujui Persyaratan Layanan Google agar dapat menggunakan bantuan AI.
Kebijakan Perusahaan dapat digunakan untuk mengontrol apakah data yang dibagikan ke Gemini dicatat dan digunakan untuk pelatihan atau tidak

Bantu kami menjadi lebih baik.

Fitur ini bersifat eksperimental dan dapat berubah di masa mendatang. Teknologi ini mungkin menghasilkan informasi yang tidak akurat atau menyinggung yang tidak mewakili pandangan Google. Beri suara pada respons untuk membantu kami meningkatkan kualitasnya dan terus berikan masukan.