Yang baru di DevTools, Chrome 133

Sofia Emelianova
Sofia Emelianova
GitHub

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 bahkan setelah memuat ulang DevTools atau Chrome.

Peningkatan panel performa

Versi ini menghadirkan sejumlah peningkatan pada panel Performa.

Insight pengiriman gambar

Tab Performa > Insight kini dapat menandai gambar yang ukuran file-nya dapat Anda optimalkan. Klik gambar dalam insight untuk melihatnya ditandai di jalur Jaringan.

Panel Performa dengan insight penayangan gambar ditandai.

Untuk mempelajari lebih lanjut cara mengoptimalkan pengiriman 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 inginkan, di sudut kanan atas panel, klik Tampilkan pintasan, lalu pilih Klasik atau Modern. Dialog pintasan juga menyediakan tips pintasan yang tersedia.

Dialog pintasan dengan pintasan yang tersedia untuk panel Performa.

Mengabaikan skrip yang tidak relevan dalam diagram percik

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

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

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

Sorotan rentang dan penanda linimasa saat mengarahkan kursor

Untuk membantu Anda lebih memahami rekaman aktivitas performa, panel Performa 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 trek Utama.

Setelan throttling yang direkomendasikan

Panel Performa kini merekomendasikan setelan throttling baik dalam metrik live maupun di menu drop-down Setelan pengambilan yang relevan.

Sebelum dan sesudah menambahkan rekomendasi throttling ke menu setelan.

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

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

Penanda waktu dalam overlay

Penanda waktu dipindahkan dari jalur Timings ke bagian bawah rekaman aktivitas dan kini ditempatkan di atas semua jalur dan terlihat meskipun jalur Timings disembunyikan.

Sebelum dan setelah memindahkan penanda ke bagian bawah rekaman aktivitas.

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

Stack trace panggilan JavaScript di Ringkasan

Tab Performa > Ringkasan kini menampilkan pelacakan tumpukan panggilan JavaScript, termasuk panggilan asinkron.

Sebelum dan sesudah menambahkan pelacakan tumpukan ke tab Ringkasan.

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.

Sebelum dan sesudah memindahkan setelan badge ke menu.

Panel 'Yang baru' baru

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

Tampilan lama dan baru panel 'Yang baru'.

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 lainnya

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Sumber: Saat dijeda, Debugger kini tidak beralih secara tidak terduga ke konteks pekerja layanan jika dibuat setelah jeda (373893057).
  • Performa:
    • Saat mengarahkan kursor ke skrip, tooltip di diagram lingkaran api 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 diteruskan (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:
    • Dengan setelan yang sesuai diaktifkan, mengklik Ekspor HAR sekali 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 mengabaikan 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

Sebaiknya gunakan 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 sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

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

Yang baru di DevTools

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