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 seiring kami mendekati penghentian penggunaan cookie pihak ketiga tersebut. Untuk mempelajari hal yang harus dilakukan terkait cookie yang terpengaruh, lihat Bersiap menghadapi 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 mendatang dan penghentian cookie pihak ketiga. Anda dapat menghapus centang dari kotak tersebut kapan saja untuk berhenti melihat masalah ini.

Peringatan tentang penghentian penggunaan cookie pihak ketiga yang akan datang di tab Masalah.

Masalah Chromium: 1466310.

Menganalisis cookie situs dengan Privacy Sandbox Analysis Tool

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 dan buka panel Privacy Sandbox. Panel ini mungkin tersembunyi di balik tombol drop-down di bagian atas.
Buka bagian Cookies, lalu klik Analyze this tab. Jika alat tersebut tidak menemukan cookie, coba muat ulang halaman.

Privacy Sandbox Analysis Tool.

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

Petunjuk PSAT.
Untuk memprediksi hal yang mungkin akan terjadi setelah penghentian penggunaan diterapkan, 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 yang disematkan, dan lain-lain, lihat contoh demo di Skenario Analisis.

Selain itu, lihat panduan tentang Melaporkan masalah.

Listingan yang diabaikan yang disempurnakan

Pola pengecualian default untuk `node_modules`

Versi ini mengaktifkan ekspresi reguler default sebagai aturan pengecualian kustom di Setelan > Daftar Abaikan. 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 akan menghentikan eksekusi jika ditemukan atau diteruskan melalui kode yang tidak diabaikan

Jika Anda men-debug kode dengan opsi Pause on Tangkap pengecualian dicentang, Debugger kini akan menghentikan eksekusi pada pengecualian yang tertangkap berikut, baik sinkron maupun asinkron:

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

Jeda pada pengecualian yang tertangkap yang meneruskan kode yang tidak diabaikan.

Untuk menguji perilaku ini, buka halaman demo ini:

Buka DevTools > Sources, tambahkan folder hidden ke daftar yang diabaikan, lalu centang Jeda pengecualian yang tertangkap.
Di halaman tersebut, pada daftar skenario "Tertangkap", klik tombol lain dan lihat eksekusinya dijeda dalam kasus yang disebutkan.

Untuk menjeda eksekusi pada pengecualian yang tertangkap dan/atau tidak tertangkap (saat 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 bagaimana blok try...finally tidak menangkap pengecualian apa pun.

Masalah Chromium: 1489312, 1291064.

Mengganti nama `x_google_ignoreList` 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 nama 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 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 mode input.

Masalah Chromium: 1410433.

Panel Elemen sekarang menampilkan URL untuk node `#document`

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

Bagian sebelum dan sesudah menampilkan documentURL di samping node #document.

Masalah Chromium: 1376976.

Kebijakan Keamanan Konten yang Efektif di panel Aplikasi

Kini Anda dapat melihat detail Kebijakan Keamanan Konten (CSP) dari frame yang diperiksa. Untuk melihat detailnya, buka Aplikasi > Frame, pilih frame, lalu scroll ke bawah ke bagian Kebijakan Keamanan Konten (CSP).

Bagian Kebijakan Keamanan Konten yang terdapat di tab Aplikasi.

Masalah Chromium: 1424714.

Peningkatan proses debug animasi

Di tab Animasi sekarang, Anda dapat:

Klik di mana saja pada header linimasa untuk menetapkan titik pemutaran. Animasi akan terus diputar jika sudah diputar dan berhenti jika tidak. Sebelumnya, Anda harus menyeretnya.
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 mandiri) adalah serangan yang menipu Anda agar menempelkan kode berbahaya ke DevTools dan memungkinkan penyerang mendapatkan kontrol atas akun web dan informasi pribadi Anda.

Jika Anda pengguna baru DevTools dan mencoba menempelkan kode, panel Sources sekarang 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 sekali, peringatan tidak akan ditampilkan lagi.

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

Masalah Chromium: 345205.

Titik henti sementara pemroses peristiwa di pekerja web dan worklet

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

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

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 ditingkatkan lebih lanjut. Tim DevTools ingin mengucapkan terima kasih kepada Junseo (Jeremy) Yoo karena telah memberikan perbaikan ini.

Masalah Chromium: 1448214.

Pramuat diganti namanya menjadi Pemuatan spekulatif

Untuk menghindari penggunaan istilah sebelumnya secara berlebihan dan mencerminkan perilaku tersebut dengan lebih baik, nama Aplikasi > Pramuat telah diganti namanya menjadi Pemuatan spekulatif. Pemuatan spekulatif memungkinkan pemuatan halaman yang hampir instan berdasarkan aturan spekulasi yang dapat Anda tentukan agar situs dapat melakukan pra-rendering dan mengambil data sebagian besar halaman yang dibuka.

Sebelum dan sesudah 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.

Pembaruan ini mencakup perbaikan pada kategori performa. Insight performa kini diberi skor dan diprioritaskan berdasarkan estimasi dampaknya terhadap metrik performa. Selain itu, pengukur skor performa menyertakan informasi yang lebih terperinci tentang bagaimana setiap metrik memengaruhi 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 sekarang akan mengumumkan status (dicentang atau tidak dicentang) kotak centang di bagian Sumber > Titik henti sementara.
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 pada menu drop-down pada panel Jaringan (1471020).
Cakupan:
- Cakupan baris demi baris tetap untuk kode yang siap dicetak (1464974).
- Informasi cakupan kini diperbarui saat pemuatan ulang halaman (1494457).
Konsol:
- Memperbaiki pemilihan teks parsial dalam pesan (1487449).
- Memperbaiki berkedip drop-down pelengkapan otomatis (1487453).
- Tanda kurung yang didukung di jalur tumpukan dan URL dalam pelacakan tumpukan (1473926).
Sumber: Mendukung sorotan 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 ditunjukkan jika 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 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 mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait 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.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.