Yang baru di DevTools (Chrome 120)

Penghentian cookie pihak ketiga

Situs Anda mungkin menggunakan cookie pihak ketiga dan sekarang saatnya mengambil tindakan menjelang penghentian penggunaannya. Untuk mempelajari tindakan yang harus dilakukan terhadap cookie yang terpengaruh, lihat Mempersiapkan penghentian cookie pihak ketiga.

Kotak centang Sertakan masalah cookie pihak ketiga telah diaktifkan secara default untuk semua pengguna Chrome, sehingga tab Masalah kini memperingatkan Anda tentang cookie yang akan terpengaruh oleh penghentian dan penghentian penggunaan cookie pihak ketiga secara bertahap yang akan datang. Anda dapat menghapus tanda centang kapan saja untuk berhenti melihat masalah ini.

Masalah Chromium: 1466310.

Menganalisis cookie situs Anda dengan Privacy Sandbox Analysis Tool

Ekstensi Privacy Sandbox Analysis Tool untuk DevTools sedang dalam pengembangan aktif dengan versi pra-rilis terbaru 0.3.2. Alat ini memungkinkan Anda memahami cara situs Anda menggunakan cookie dan memberikan panduan tentang API Chrome baru yang menjaga privasi.

Untuk menganalisis cookie Anda:

1. Instal ekstensi di Chrome.
2. Buka situs Anda dalam satu tab untuk analisis terbaik.
3. Buka DevTools dan buka panel Privacy Sandbox. Panel ini mungkin tersembunyi di balik tombol drop-down di bagian atas.
4. Buka bagian Cookies, lalu klik Analyze this tab. Jika alat tidak menemukan cookie, coba muat ulang halaman.

Untuk mengetahui informasi selengkapnya tentang cara menggunakan Privacy Sandbox Analysis Tool (PSAT), lihat artikel berikut:

• Cara Menggunakan PSAT.
• Untuk memprediksi apa yang mungkin terjadi setelah penghentian penggunaan berlaku, siapkan Lingkungan Evaluasi.
• Untuk mengidentifikasi aspek yang akan terpengaruh, lihat Tindakan Analisis Umum.
• Untuk mempelajari cara menganalisis skenario umum, termasuk analisis, e-commerce, layanan SSO, konten sematan, dan lainnya, lihat contoh demo di Skenario Analisis.

Selain itu, lihat panduan tentang Melaporkan masalah.

Peningkatan daftar yang diabaikan

Pola pengecualian default untuk node_modules

Versi ini mengaktifkan ekspresi reguler default sebagai aturan pengecualian kustom di Setelan > Daftar Abaikan. Agar Anda hanya fokus pada kode Anda, Debugger kini akan melewati skrip dari /node_modules/ dan /bower_components/ secara default. Anda dapat menonaktifkan aturan ini di setelan kapan saja.

Masalah Chromium: 1496301.

Pengecualian kini menghentikan eksekusi jika tertangkap atau melewati kode yang tidak diabaikan

Saat Anda men-debug kode dengan opsi Jeda pada pengecualian yang tertangkap dicentang, Debugger kini menghentikan eksekusi pada pengecualian yang tertangkap berikut, baik sinkron maupun asinkron:

• Pengecualian yang tertangkap dalam frame yang tidak diabaikan di stack panggilan.
• Pengecualian yang tertangkap yang melewati frame yang tidak diabaikan dalam stack panggilan. Misalnya, lihat screenshot.

Untuk menguji perilaku ini, buka halaman demo ini:

1. Buka DevTools > Sources, tambahkan folder hidden ke daftar yang diabaikan, lalu centang Pause on caught exceptions .
2. Di halaman tersebut, di bagian daftar skenario "Tertangkap", klik berbagai tombol dan lihat eksekusi yang dijeda dalam kasus yang disebutkan.

Untuk menjeda eksekusi pada pengecualian yang tertangkap dan/atau tidak tertangkap (jika dicentang) dalam panggilan asinkron, Debugger mencari pengendali penolakan di seluruh promise. Mulai dari versi ini, Debugger tidak lagi memprediksi bahwa Promise.finally() akan menangkap pengecualian, mirip dengan cara blok try...finally tidak menangkap pengecualian apa pun.

Masalah Chromium: 1489312, 1291064.

x_google_ignoreList diganti namanya menjadi ignoreList di peta sumber

Spesifikasi peta sumber telah mengadopsi kolom ignoreList, bukan x_google_ignoreList, dan DevTools kini mendukung nama baru dengan penggantian untuk nama lama. Framework dan bundler kini dapat menggunakan nama kolom baru.

Peta sumber memungkinkan Anda men-debug kode yang Anda tulis, bukan kode yang diminifikasi yang ditayangkan oleh situs Anda.

Untuk mengetahui informasi selengkapnya tentang peta sumber, lihat:

• Apa yang dimaksud dengan peta sumber
• Men-debug kode asli Anda, bukan kode yang di-deploy dengan peta sumber

Tombol mode input baru selama proses debug jarak jauh

Kini Anda dapat beralih antara input sentuh dan mouse saat men-debug tab Chrome dari jarak jauh. Misalnya, saat Anda menjalankan instance Chrome dengan --remote-debugging-port=<port> dan terhubung ke target jaringan ini melalui chrome://inspect/#devices.

Tonton video untuk melihat cara kerja pengalihan mode input.

Masalah Chromium: 1410433.

Panel Elemen kini menampilkan URL untuk node #document

Untuk mempermudah Anda men-debug iframe, panel Elements kini menampilkan documentURL di samping node #document.

Masalah Chromium: 1376976.

Kebijakan Keamanan Konten yang Efektif di panel Aplikasi

Sekarang Anda dapat melihat detail Kebijakan Keamanan Konten (CSP) dari frame yang diperiksa. Untuk melihat detailnya, buka Application > Frames, pilih frame, lalu scroll ke bawah ke bagian Content Security Policy (CSP).

Masalah Chromium: 1424714.

Peningkatan debug animasi

Di tab Animasi, Anda kini dapat:

• Klik di mana saja pada header linimasa untuk menyetel titik pemutaran. Animasi akan terus diputar jika sudah diputar dan berhenti jika tidak. Sebelumnya, Anda harus menariknya.
• Ubah ukuran kolom nama untuk melihat nama animasi lengkap.

Masalah Chromium: 1492460, 1489721.

Dialog 'Apakah Anda memercayai kode ini?' di Sumber dan peringatan XSS mandiri di Konsol

Eksperimen Tampilkan peringatan tentang XSS Mandiri saat menempelkan kode telah diaktifkan secara default. XSS mandiri (pembuatan skrip lintas situs mandiri) adalah serangan yang mengelabui Anda agar menempelkan kode berbahaya ke DevTools dan memungkinkan penyerang mendapatkan kontrol atas akun web dan informasi pribadi Anda.

Jika Anda adalah pengguna DevTools baru dan mencoba menempelkan kode, panel Sources kini menampilkan dialog Do you trust this code? dan Console kini menampilkan peringatan serupa. Hanya tempelkan kode yang Anda pahami dan telah Anda tinjau sendiri. Untuk menempelkan, ketik allow pasting saat diminta. Setelah penempelan diizinkan satu kali, peringatan tidak akan ditampilkan lagi.

Masalah Chromium: 345205.

Titik henti sementara pemroses peristiwa di pekerja web dan worklet

Saat Anda menyetel titik henti sementara peristiwa di Sumber > Titik Henti Sementara Pemroses Peristiwa, selain berhenti pada peristiwa ini di situs Anda, Debugger kini juga berhenti saat peristiwa yang sesuai terjadi di web worker atau worklet jenis apa pun, termasuk Shared Storage Worklet.

Masalah Chromium: 1445175.

Badge media baru untuk <audio> dan <video>

Anda kini dapat mengaktifkan badge media baru untuk elemen <audio> dan <video> di panel Elemen. Saat Anda mengklik badge, Anda akan diarahkan ke panel Media, sehingga Anda dapat men-debug elemen ini.

Fitur ini sedang dalam pengembangan dan akan ditingkatkan lebih lanjut. Tim DevTools ingin mengucapkan terima kasih kepada Junseo (Jeremy) Yoo atas peluncuran peningkatan ini.

Masalah Chromium: 1448214.

Pemuatan awal diganti namanya menjadi Pemuatan spekulatif

Untuk menghindari penggunaan istilah sebelumnya secara berlebihan dan mencerminkan perilaku dengan lebih baik, Application > Preloading telah diganti namanya menjadi Speculative loads. Pemuatan spekulatif memungkinkan pemuatan halaman yang hampir instan berdasarkan aturan spekulasi yang dapat Anda tentukan untuk situs Anda guna melakukan pra-rendering dan pengambilan awal halaman yang paling sering dibuka.

Masalah Chromium: 1478888.

Lighthouse 11.2.0

Panel Lighthouse kini menjalankan Lighthouse 11.2.0. Lihat daftar lengkap perubahan.

Update ini mencakup perombakan pada kategori performa. Insight performa kini diberi skor dan diprioritaskan berdasarkan perkiraan dampaknya terhadap metrik performa. Selain itu, pengukur skor performa menyertakan informasi yang lebih mendetail tentang pengaruh setiap metrik terhadap skor.

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

Masalah Chromium: 772558.

Peningkatan aksesibilitas

Versi ini memiliki peningkatan aksesibilitas berikut:

• Pembaca layar kini akan mengumumkan status (dicentang atau tidak dicentang) kotak centang di bagian Sumber > Titik henti sementara.
• Anda kini dapat mengakses menu drop-down Sembunyikan masalah seperti ini dengan keyboard.

Masalah Chromium: 1488645, 1484918.

Sorotan lain-lain

Berikut beberapa perbaikan dan peningkatan penting dalam rilis ini:

• Performa: Memperbaiki indikator LCP yang terkadang tidak ada dalam rekaman (1487136).
• Pemuatan spekulatif: Memperbaiki URL lengkap untuk target di menu drop-down pada panel Jaringan (1471020).
• Cakupan:
  • Memperbaiki cakupan baris demi baris untuk kode yang dicetak rapi (1464974).
  • Informasi cakupan kini diperbarui saat halaman dimuat ulang (1494457).
• Konsol:
  • Memperbaiki pemilihan teks parsial dalam pesan (1487449).
  • Memperbaiki kedipan drop-down perlengkapan otomatis (1487453).
  • Tanda kurung yang didukung di jalur stack dan URL dalam rekaman aktivitas stack (1473926).
• Sumber: Mendukung penyorotan sintaksis kata kunci using TypeScript (1490515).
• Menu Buka Cepat kini menampilkan metode pribadi (1492957).
• Aplikasi > Layanan latar belakang: Menu tindakan atas kini melipat teks saat diubah ukurannya (1487276).
• Elemen > Gaya:
  • Memperbaiki resolusi variabel CSS yang diwarisi untuk elemen slot (1492162).
  • Saat menonaktifkan properti CSS, komentarnya kini dihapus untuk memperbaiki kerusakan sintaksis (1101224).
• Jaringan: Kolom Prioritas kini menampilkan tooltip dengan informasi tentang prioritas awal (hal yang sama ditampilkan saat Baris permintaan besar dicentang) (1495735).
• Penghentian penggunaan:
  • Setelan Format warna telah dinonaktifkan di versi sebelumnya dan kini dihapus.
  • Opsi Hapus semua penggantian di Sumber kini dihapus karena jarang digunakan setelah penyederhanaan penggantian (1473681).

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.