Yang baru di DevTools (Chrome 120)

Sofia Emelianova
Sofia Emelianova
GitHub

Penghentian cookie pihak ketiga

Situs Anda mungkin menggunakan cookie pihak ketiga dan sekarang saatnya untuk mengambil tindakan karena kami akan menghentikan penggunaannya. Untuk mempelajari tindakan yang harus dilakukan terkait cookie yang terpengaruh, lihat Persiapan menghadapi penghentian penggunaan cookie pihak ketiga.

Kotak centang 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 cookie pihak ketiga mendatang di tab Masalah.

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 0.3.2 terbaru. 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 di satu tab untuk mendapatkan analisis terbaik.
  3. Buka DevTools dan buka panel Privacy Sandbox. Panel ini mungkin disembunyikan di balik tombol drop-down Tab lainnya. di bagian atas.
  4. Buka bagian Cookies, lalu klik Analyze this tab. Jika alat ini tidak menemukan cookie apa pun, coba muat ulang halaman.

Privacy Sandbox Analysis Tool.

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

  • How To PSAT.
  • Untuk memprediksi hal yang mungkin terjadi setelah penghentian 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 tersemat, dan lainnya, 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. 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 penambahan ekspresi reguler.

Masalah Chromium: 1496301.

Pengecualian kini akan menghentikan eksekusi jika ditemukan atau diteruskan melalui kode yang tidak diabaikan

Saat Anda men-debug kode dengan Kotak centang. Pause on caught exceptions dicentang, Debugger kini menghentikan eksekusi pada pengecualian yang tertangkap berikut, baik sinkron maupun asinkron:

  • Pengecualian yang diambil dalam frame yang tidak diabaikan dalam stack panggilan.
  • Menangkap pengecualian 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:

  1. Buka DevTools > Sources, tambahkan folder hidden ke daftar yang diabaikan, lalu centang Kotak centang. Pause on caught exceptions.
  2. 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 (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 tidak menangkap apa pun.

Masalah Chromium: 1489312, 1291064.

Mengganti nama x_google_ignoreList menjadi ignoreList di peta sumber

Spesifikasi peta sumber telah menggunakan 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 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 tombol mode input.

Masalah Chromium: 1410433.

Panel Elemen kini menampilkan URL untuk node #document

Agar Anda dapat men-debug iframe dengan lebih mudah, 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

Sekarang 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 Content Security Policy (CSP).

Bagian Kebijakan Keamanan Konten yang terletak di tab Aplikasi.

Masalah Chromium: 1424714.

Peningkatan kualitas proses debug animasi

Di tab Animasi, Anda kini dapat:

  • Klik di mana saja pada header linimasa untuk menyetel playhead. 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

Kotak centang. Tampilkan peringatan tentang Self-XSS saat menempelkan kode eksperimen telah diaktifkan secara default. Self-XSS (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 Sumber kini menampilkan dialog Apakah Anda memercayai kode ini? dan Konsol kini menampilkan peringatan serupa. Hanya tempelkan kode yang Anda pahami dan telah Anda tinjau sendiri. Untuk menempelkan, ketik allow pasting saat diminta. Setelah menempelkan diizinkan sekali, peringatan tidak akan pernah ditampilkan lagi.

Dialog &#39;Apakah Anda memercayai kode ini?&#39; 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 menjeda peristiwa ini di situs Anda, Debugger kini juga menjeda 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 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. Jika Anda mengklik badge, Anda akan diarahkan ke panel Media, sehingga Anda dapat men-debug elemen ini.

Badge media baru untuk tag audio dan video diaktifkan.

Fitur ini sedang dalam pengembangan dan akan ditingkatkan lebih lanjut. Tim DevTools ingin mengucapkan terima kasih kepada Junseo (Jeremy) Yoo atas 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, Aplikasi > Pemuatan awal telah diganti namanya menjadi Pemuatan spekulatif. Pemuatan spekulatif memungkinkan pemuatan halaman yang hampir instan berdasarkan aturan spekulasi yang dapat Anda tentukan agar situs Anda melakukan pra-rendering dan pra-pengambilan sebagian besar halaman yang dinavigasi.

Sebelum dan sesudah mengganti nama pramuat menjadi pemuatan spekulatif.

Masalah Chromium: 1478888.

Lighthouse 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 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 lainnya

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Performa: Memperbaiki indikator LCP yang terkadang hilang dalam rekaman (1487136).
  • Pemuatan spekulatif: Memperbaiki URL lengkap untuk target di menu drop-down di panel Jaringan (1471020).
  • Cakupan:
    • Cakupan baris demi baris tetap untuk kode yang siap dicetak (1464974).
    • Informasi cakupan kini diperbarui saat halaman dimuat ulang (1494457).
  • Konsol:
    • Memperbaiki pemilihan teks parsial dalam pesan (1487449).
    • Memperbaiki kedipan 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 Buka Cepat kini menampilkan metode pribadi (1492957).
  • Application > Background services: Panel tindakan atas kini menggabungkan teks saat mengubah ukuran (1487276).
  • Elemen > Gaya:
    • Memperbaiki resolusi variabel CSS yang diwarisi untuk elemen dengan slot (1492162).
    • Saat menonaktifkan properti CSS, komentarnya kini dihapus untuk memperbaiki jeda 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 sekarang dihapus.
    • Opsi Hapus semua penggantian di Sumber kini dihapus karena jarang digunakan setelah penyederhanaan penggantian (1473681).

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.