Halaman ini diterjemahkan oleh Cloud Translation API.

Yang baru di DevTools (Chrome 120)

Sofia Emelianova

Penghentian cookie pihak ketiga

Situs Anda mungkin menggunakan cookie pihak ketiga dan sekarang saatnya mengambil tindakan mendekati penghentian cookie tersebut. Untuk mempelajari tindakan yang harus dilakukan terkait cookie yang terpengaruh, lihat Menyiapkan akhir 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 mendatang dan penghentian cookie pihak ketiga. Anda dapat menghapus centang pada kotak kapan saja untuk berhenti melihat masalah ini.

Peringatan tentang penghentian penggunaan cookie pihak ketiga mendatang di tab Masalah.

Masalah Chromium: 1466310.

Menganalisis cookie situs Anda dengan Alat Analisis Privacy Sandbox

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

Untuk menganalisis cookie Anda:

Instal ekstensi di Chrome.
Buka situs Anda di satu tab untuk mendapatkan analisis terbaik.
Buka DevTools, lalu buka panel Privacy Sandbox. Panel ini mungkin tersembunyi di balik tombol drop-down di bagian atas.
Buka bagian Cookie dan klik Analisis tab ini. Jika alat ini tidak menemukan cookie, coba muat ulang halaman.

Alat Analisis Privacy Sandbox.

Untuk mengetahui informasi selengkapnya tentang cara menggunakan Alat Analisis Privacy Sandbox (PSAT), lihat referensi berikut:

PSAT's How To.
Untuk memprediksi hal yang mungkin terjadi setelah penghentian diberlakukan, 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 tersemat, dan banyak lagi, lihat contoh demo dalam Skenario Analisis.

Selain itu, lihat panduan tentang Melaporkan masalah.

Listingan yang diabaikan ditingkatkan

Pola pengecualian default untuk `node_modules`

Versi ini mengaktifkan ekspresi reguler default sebagai aturan pengecualian khusus di Settings > Ignore List. Untuk membantu Anda berfokus hanya pada kode, Debugger kini akan melewati skrip dari /node_modules/ dan /bower_components/ secara default. Anda dapat menonaktifkan aturan ini di setelan kapan saja.

Sebelum dan sesudah menambahkan ekspresi reguler.

Masalah Chromium: 1496301.

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

Saat Anda men-debug kode dengan mencentang Pause on caught exception, Debugger kini menghentikan eksekusi pada pengecualian yang tertangkap berikut, baik sinkron maupun asinkron:

Pengecualian yang tertangkap dalam frame yang tidak diabaikan dalam stack panggilan.
Tertangkap pengecualian yang melewati frame yang tidak diabaikan dalam stack panggilan. Misalnya, lihat screenshot.

Jeda pengecualian yang tertangkap dan diteruskan melalui kode yang tidak diabaikan.

Untuk menguji perilaku ini, buka halaman demo ini:

Buka DevTools > Sources, tambahkan folder hidden ke daftar yang diabaikan, lalu centang Pause on lima exceptions.
Di halaman, di bagian daftar skenario "Terjebak", klik tombol lain 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 akan mencari pengendali penolakan di seluruh promise. Mulai versi ini, Debugger tidak lagi memprediksi bahwa Promise.finally() akan menangkap pengecualian, mirip dengan cara blok try...finally yang tidak menangkap 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 sekarang mendukung nama baru dengan penggantian untuk kolom lama. Framework dan pemaket 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 informasi selengkapnya tentang peta sumber, lihat:

Tombol mode input baru selama proses debug jarak jauh

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

Tonton video untuk melihat cara kerja mode input yang beralih.

Masalah Chromium: 1410433.

Panel Elemen kini menampilkan URL untuk node `#document`

Agar Anda dapat men-debug iframe dengan lebih mudah, panel Elements kini menampilkan documentURL di samping node #document.

Tanda sebelum dan sesudah menampilkan documentURL di samping #node dokumen.

Masalah Chromium: 1376976.

Effective Content Security Policy di panel Application

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

Bagian Content Security Policy yang terletak di tab Application.

Masalah Chromium: 1424714.

Proses debug animasi yang lebih baik

Di tab Animasi, kini Anda dapat:

Klik di mana saja pada header linimasa untuk menyetel titik pemutaran. Animasi akan terus diputar jika sudah diputar dan berhenti jika tidak diputar. 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

Tampilkan peringatan tentang Self-XSS saat menempelkan kode eksperimen telah diaktifkan secara default. Self-XSS (pembuatan skrip lintas situs secara mandiri) adalah serangan yang mengelabui Anda agar menempelkan kode berbahaya ke DevTools dan memungkinkan penyerang mengontrol akun web dan informasi pribadi Anda.

Jika Anda pengguna baru DevTools 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 menempel, ketik allow pasting saat diminta. Setelah penempelan diizinkan sekali, peringatan tidak akan ditampilkan lagi.

Dialog 'Apakah Anda mempercayai kode ini?' saat menempelkan kode ke Sumber.

Masalah Chromium: 345205.

Titik henti sementara pemroses peristiwa dalam pekerja web dan worklet

Saat Anda menetapkan titik henti sementara peristiwa di Sumber > Titik Henti Sementara Pemroses Peristiwa, selain menjeda peristiwa ini di situs Anda, Debugger kini juga akan dijeda saat peristiwa yang sesuai terjadi di pekerja web atau worklet dari jenis apa pun, termasuk Worklet Penyimpanan Bersama.

Debugger dijeda saat pekerja layanan memanggil fungsi waktu tunggu yang telah disetel.

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 mengklik badge, Anda akan diarahkan ke panel Media, sehingga Anda dapat men-debug elemen ini.

Fitur ini sedang dalam pengembangan dan akan lebih ditingkatkan. Tim DevTools ingin mengucapkan terima kasih kepada Junseo (Jeremy) Yoo atas keberhasilannya dalam meningkatkan kualitas ini.

Masalah Chromium: 1448214.

Pramuat diganti namanya menjadi Pemuatan spekulatif

Untuk menghindari penggunaan istilah sebelumnya secara berlebihan dan mencerminkan perilaku dengan lebih baik, nama Aplikasi > Pramuat telah diganti menjadi Pemuatan spekulatif. Pemuatan spekulatif memungkinkan pemuatan halaman yang hampir seketika berdasarkan aturan spekulasi yang dapat Anda tentukan untuk situs Anda guna melakukan pra-rendering dan pengambilan data yang paling banyak dibuka di halaman.

Mengganti nama pramuat ke pemuatan spekulatif.

Masalah Chromium: 1478888.

Mercusuar 11.2.0

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

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

Perbaikan performa sebelum dan sesudah.

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 Sources > Breakpoints.
Sekarang Anda dapat mengakses menu drop-down Sembunyikan masalah seperti ini dengan keyboard.

Masalah Chromium: 1488645, 1484918.

Sorotan lain-lain

Berikut adalah 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 Network (1471020).
Cakupan:
- Memperbaiki cakupan baris demi baris untuk kode yang cukup dicetak (1464974).
- Informasi cakupan kini diperbarui saat halaman dimuat ulang (1494457).
Konsol:
- Memperbaiki pemilihan teks sebagian dalam pesan (1487449).
- Memperbaiki kedipan drop-down pelengkapan otomatis (1487453).
- Tanda kurung yang didukung dalam jalur tumpukan dan URL dalam pelacakan tumpukan (1473926).
Sumber: Mendukung penyorotan sintaksis kata kunci using TypeScript (1490515).
Menu Quick Open kini menampilkan metode pribadi (1492957).
Aplikasi > Layanan latar belakang: Panel tindakan atas kini menggabungkan teks saat mengubah ukuran (1487276).
Elemen > Gaya:
- Memperbaiki resolusi variabel CSS yang diwarisi untuk elemen yang ditempatkan (1492162).
- Saat menonaktifkan properti CSS, komentarnya kini dihapus untuk memperbaiki jeda sintaksis (1101224).
Jaringan: Kolom Prioritas sekarang 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 sekarang telah dihapus.
- Opsi Hapus semua penggantian di Sumber kini dihapus karena rendahnya penggunaan setelah penyederhanaan penggantian (1473681).

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, menguji API platform web tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan dengan DevTools.

Kirim saran atau masukan kepada kami melalui crbug.com.
Laporkan masalah DevTools menggunakan Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
Tweet di @ChromeDevTools.
Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.