Yang baru di DevTools, Chrome 133

Histori chat AI persisten

Panel Bantuan AI kini menyimpan histori chat Anda secara lokal di seluruh sesi, sehingga Anda dapat melihat percakapan sebelumnya dengan Gemini meskipun setelah memuat ulang DevTools atau Chrome.

Peningkatan panel performa

Versi ini menghadirkan sejumlah peningkatan pada panel Performa.

Insight penayangan gambar

Tab Performa > Insight kini dapat menandai gambar yang ukuran filenya dapat Anda optimalkan. Klik gambar dalam insight untuk melihatnya disorot di jalur Jaringan.

Untuk mempelajari lebih lanjut cara mengoptimalkan penayangan gambar, lihat Mengenkode gambar secara efisien.

Navigasi keyboard klasik dan modern

Panel Performa kini memungkinkan Anda memilih gaya navigasi keyboard yang diinginkan, dengan perbedaan utama berikut:

• Klasik: Zoom dengan roda mouse (touchpad atas atau bawah) dan scroll vertikal dengan Shift + roda mouse.
• Modern: Scroll vertikal dengan roda mouse, scroll horizontal dengan Shift + roda mouse, dan zoom dengan Command/Control + roda mouse.

Untuk memilih gaya yang Anda sukai, di sudut kanan atas panel, klik bantuan Tampilkan pintasan, lalu pilih Klasik atau Modern. Dialog pintasan juga memberi Anda lembar contekan pintasan yang tersedia.

Abaikan skrip yang tidak relevan dalam flame chart

Untuk lebih berfokus pada kode, Anda kini dapat menambahkan skrip yang tidak relevan ke daftar yang diabaikan langsung di panel Performa. Panel akan otomatis menciutkan nesting yang berlebihan.

Untuk menambahkan skrip ke daftar yang diabaikan, klik compress Tampilkan dialog setelan daftar yang diabaikan di panel tindakan atas, lalu ketik ekspresi reguler di kolom input. Diagram flame akan menerapkan aturan baru saat Anda mengetik.

DevTools menyimpan aturan daftar abaikan yang Anda tambahkan di setelan Setelan > Daftar abaikan dan Anda dapat mengaktifkan serta menonaktifkannya dalam dialog sesuai keinginan.

Penanda linimasa dan penyorotan rentang saat mengarahkan kursor

Untuk membantu Anda lebih memahami rekaman aktivitas performa, panel Performance kini melakukan hal berikut:

• Menampilkan penanda vertikal yang mencakup seluruh rekaman aktivitas performa saat Anda mengarahkan kursor ke Linimasa.
• Menandai rentang di Linimasa saat Anda mengarahkan kursor ke item di jalur Utama.

Setelan pembatasan yang direkomendasikan

Panel Performa kini merekomendasikan setelan pembatasan di metrik langsung dan di menu drop-down Setelan pengambilan setelan yang relevan.

Pembatasan CPU yang direkomendasikan (untuk saat ini) adalah 4x slowdown yang paling sering digunakan dan rekomendasi jaringan didasarkan pada data Chrome UX Report, jika diaktifkan di metrik aktif.

Selain itu, panel Performa kini mengingatkan Anda tentang setelan pembatasan yang Anda gunakan di samping setiap rekaman aktivitas di menu drop-down Sesi terbaru di panel tindakan.

Penanda pengaturan waktu dalam overlay

Penanda waktu dipindahkan dari trek Timings ke bagian bawah rekaman aktivitas dan kini ditumpuk di atas semua trek dan dapat dilihat meskipun trekTimings disembunyikan.

Jalur Waktu mempertahankan panggilan mark() dan measure() kustom Anda.

Stack trace panggilan JavaScript di Ringkasan

Tab Performa > Ringkasan kini menampilkan stack trace panggilan JavaScript, termasuk yang asinkron.

Setelan badge dipindahkan ke menu di Elemen

Setelan badge di panel Elemen dipindahkan dari panel tindakan yang disembunyikan secara default ke menu klik kanan yang sesuai.

Panel 'Yang baru' yang baru

Panel Yang baru mendapatkan tampilan baru yang lebih mengikuti desain Chrome.

Masalah Chromium: 325441858.

Lighthouse 12.3.0

Panel Lighthouse kini menjalankan Lighthouse 12.3.0.

Pembaruan ini menambahkan, antara lain, audit baru yang memeriksa isolasi origin yang tepat dengan COOP dan kebijakan HSTS yang kuat. Lihat daftar lengkap perubahan.

Untuk mempelajari dasar-dasar penggunaan panel Lighthouse di DevTools, lihat Lighthouse: Mengoptimalkan kecepatan situs.

Masalah Chromium: 40543651.

Sorotan lain-lain

Berikut beberapa perbaikan dan peningkatan penting dalam rilis ini:

• Sumber: Saat dijeda, Debugger tidak lagi beralih ke konteks pekerja layanan secara tidak terduga jika dibuat setelah jeda (373893057).
• Performa:
  • Saat mengarahkan kursor ke skrip, tooltip dalam diagram flame kini menampilkan URL, jika ada (368541957).
  • Ringkasan: Diagram lingkaran diganti dengan representasi batang.
  • Kotak centang Data ekstensi di Setelan pengambilan diganti namanya menjadi Tampilkan jalur kustom.
  • Tab Insight kini memiliki bagian Insight yang lulus (N), yang diciutkan secara default.
• Aplikasi > Penyimpanan: Anda dapat membuat entri penyimpanan dengan kunci kosong karena secara teknis valid (373703285).
• Mode perangkat kini dinonaktifkan untuk halaman chrome:// (40186276).
• Jaringan:
  • Jika setelan yang sesuai diaktifkan, mengklik Ekspor HAR satu kali akan membuka menu dengan dua opsi (dibersihkan dan berisi data sensitif). Sebelumnya, menu dibuka dengan klik lama (378076279).
  • Salin sebagai cURL kini menggunakan atribut -b untuk melewati cookie dan lebih mudah dibaca, bukan -H 'cookie:...' (40791742).
• Aksesibilitas: Anda kini dapat memindahkan tab di dalam panel ke kiri atau kanan dengan menu konteks (383164782).
• Pemblokiran permintaan jaringan: Setelan menu perintah ini kini disinkronkan dengan kotak centang yang sesuai (378058733).

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