Yang Baru di DevTools (Chrome 117)

Peningkatan panel jaringan

Ganti konten web lokal dengan lebih cepat

Fitur penggantian lokal kini disederhanakan, sehingga Anda dapat dengan mudah meniru header respons dan konten web resource jarak jauh dari panel Jaringan tanpa mengakses fitur tersebut.

Untuk mengganti konten web, buka panel Jaringan, klik kanan permintaan, lalu pilih Ganti konten.

Jika Anda telah menyiapkan penggantian lokal tetapi dinonaktifkan, DevTools akan mengaktifkannya. Jika Anda belum menyiapkannya, DevTools akan meminta Anda di panel tindakan di bagian atas. Pilih folder untuk menyimpan penggantian dan izinkan akses DevTools ke folder tersebut.

Setelah penggantian disiapkan, DevTools akan mengarahkan Anda ke Sumber > Penggantian > Editor agar Anda dapat mengganti konten web.

Perhatikan bahwa resource yang diganti ditunjukkan dengan di panel Network. Arahkan kursor ke ikon untuk melihat bagian yang diganti.

Masalah Chromium: 1465785, 1470532, 1469359.

Mengganti konten permintaan XHR dan pengambilan

Sekarang Anda dapat mengganti konten XHR dan permintaan pengambilan selain header responsnya. Dengan penggantian tersebut, Anda dapat meniru respons API untuk men-debug halaman web meskipun backend dan API Anda belum siap.

DevTools saat ini mendukung penggantian konten untuk jenis permintaan berikut: gambar (misalnya, avif, png), font, ambil dan XHR, skrip (css dan js), dan dokumen (html). DevTools kini mengubah opsi Ganti konten menjadi abu-abu untuk jenis yang tidak didukung.

Masalah Chromium: 792101, 1469776.

Sembunyikan permintaan ekstensi Chrome

Untuk membantu Anda fokus pada kode yang Anda tulis dan memfilter permintaan tidak relevan yang dikirim oleh ekstensi yang mungkin telah Anda instal di Chrome, panel Jaringan mendapatkan filter baru.

Untuk memfilter semua permintaan yang dikirim ke chrome-extension:// URL, centang Sembunyikan URL ekstensi.

Masalah Chromium: 1257885, 1458803.

Kode status HTTP yang dapat dibaca manusia

Kode Status di header permintaan kini menampilkan teks yang dapat dibaca manusia di samping kode status HTTP, sehingga Anda dapat mengetahui apa yang terjadi pada permintaan dengan lebih cepat.

Anda juga dapat mengarahkan kursor ke kode status di tabel permintaan untuk melihat teks yang sama.

Masalah Chromium: 1153956.

Respons pretty-print untuk subjenis JSON

Tab Response untuk permintaan dengan subjenis MIME application/[subtype]+json (misalnya, ld+json, hal+json, dan lainnya) sekarang mengurai respons dengan benar dan memungkinkan Anda memperkuatnya.

Masalah Chromium: 406900.

Performa: Melihat perubahan dalam prioritas pengambilan untuk peristiwa jaringan

Panel Performance kini menampilkan dua kolom prioritas di Ringkasan peristiwa di jalur Network: Initial Priority dan (final) Priority, bukan hanya Priority tunggal. Dengan kolom tambahan ini, Anda kini dapat melihat apakah prioritas pengambilan peristiwa berubah dan menyesuaikan urutan download. Untuk informasi selengkapnya, lihat Mengoptimalkan pemuatan resource dengan Fetch Priority API.

Selain itu, Anda dapat menemukan informasi yang sama di kolom Priority pada panel Network, dengan setelan Big request rows yang diaktifkan.

Masalah Chromium: 1463901, 1380964.

Setelan sumber diaktifkan secara default: Pemendekan kode dan pengungkapan file otomatis

Setelan > Preferensi > Opsi Pelipatan kode kini diaktifkan secara default. Opsi ini memungkinkan Anda melipat blok kode.

Untuk melipat blok kode, arahkan kursor ke nomor baris di samping bagian awal blok, lalu klik ikon ciutkan . Klik {...} untuk meluaskan lagi pemblokiran.

Selain itu, Settings > Preferensi > Tampilkan file di sidebar secara otomatis kini juga diaktifkan secara default.

Setelan ini membuat hierarki file di kolom Sources > Halaman memilih file saat ini yang terbuka di Editor saat Anda beralih tab.

Masalah Chromium: 1459193, 1336599.

Proses debug yang lebih baik untuk masalah cookie pihak ketiga

Untuk membantu membuat web yang lebih pribadi dan sejalan dengan update dari browser lain, Chrome memperkenalkan inisiatif Privacy Sandbox. Inisiatif ini pada dasarnya meningkatkan privasi di web dan dapat mempertahankan web yang sehat dan didukung iklan dengan cara yang akan membuat cookie pihak ketiga tidak digunakan lagi. Privacy Sandbox memiliki rentang waktu penghentian bertahap agar Anda dapat beradaptasi dengan perubahan dengan nyaman.

Anda dapat menguji perilaku Chrome setelah penghentian cookie pihak ketiga. Untuk melakukannya, jalankan Chrome dari command line dengan tanda --test-third-party-cookies-phaseout. Untuk mengetahui fungsi tanda ini, lihat Proses debug cookie.

Terlepas dari cara Anda menjalankan Chrome (dengan atau tanpa tanda), tab Masalah kini memiliki kotak centang Sertakan masalah cookie pihak ketiga yang diaktifkan secara default untuk semua pengguna Chrome baru dan, akibatnya, laporan:

• Peringatan perubahan yang dapat menyebabkan gangguan tentang penghentian mendatang.
• Masalah terkait cookie pihak ketiga.

Jika Anda ingin melihat peringatan cookie tentang penghentian mendatang sebagai pengguna Chrome lama, pastikan untuk mencentang kotak ini.

Untuk mengujinya, periksa cookie di halaman demo ini.

Selain itu, filter Cookie respons yang diblokir di panel Jaringan telah disusun ulang untuk memperjelas bahwa filter tersebut hanya menampilkan cookie respons yang diblokir.

Masalah Chromium: 1458839, 1462693, 1466310.

Men-debug pramuat di panel Application

Tim Chrome memunculkan kembali pra-rendering penuh untuk halaman mendatang yang kemungkinan akan dibuka oleh pengguna. Untuk memungkinkan Anda men-debug hal ini, DevTools menambahkan bagian Pramuat ke panel Aplikasi. Pengambilan data dan pra-rendering baru (secara kolektif dikenal sebagai "pramuat navigasi") menggunakan Speculation Rules API, bukan petunjuk resource berbasis link.

Pada halaman demo ini, di bagian Aplikasi > Pramuat, Anda dapat memeriksa:

• Aturan Spekulasi yang mencantumkan semua kumpulan aturan yang ditemukan di halaman saat ini.
• Pramuat yang mencantumkan semua URL yang telah diambil sebelumnya dan yang dipra-render dari kumpulan aturan.
• Halaman ini yang mencantumkan status pra-rendering halaman saat ini.

Untuk informasi selengkapnya, lihat postingan khusus tentang aturan spekulasi proses debug.

Masalah Chromium: 1410709.

Warna baru

Anda mungkin sudah mengetahui bahwa DevTools kini memiliki tampilan baru yang lebih selaras dengan Chrome. Salah satu faktor yang berkontribusi adalah skema warna baru.

Versi ini (117) menghadirkan lebih banyak peningkatan UX untuk DevTools, baik yang sudah disebutkan dan dicantumkan lebih lanjut, termasuk sejumlah teks UI yang ditingkatkan.

Masalah Chromium: 1456677.

Mercusuar 10.4.0

Panel Lighthouse sekarang menjalankan Lighthouse 10.4.0. Secara khusus, versi ini menambahkan audit aksesibilitas baru untuk hal berikut:

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

Contoh:

Lihat juga daftar lengkap perubahan. Untuk mempelajari dasar-dasar penggunaan panel Lighthouse di DevTools, lihat Lighthouse: Mengoptimalkan kecepatan situs.

Masalah Chromium: 772558.

Ekstensi proses debug WebAssembly C/C++ untuk DevTools kini menjadi open source

Ekstensi proses debug WebAssembly C/C++ untuk DevTools kini bersifat open source dan berada di repositori frontend DevTools. Ekstensi ini memungkinkan kemampuan proses debug di DevTools untuk program C++ yang dikompilasi ke WebAssembly. Untuk mengetahui informasi selengkapnya, lihat Men-debug C/C++ WebAssembly.

Pelajari cara membuat, menjalankan, dan menguji ekstensi serta jangan ragu untuk berkontribusi.

Masalah Chromium: 1410709.

Sorotan lain-lain

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

• Penyambungan CSS: Panel Elemen kini menampilkan seluruh rantai pemilih untuk turunan bertingkat (1172985).
• Aplikasi > Manifest kini memiliki bagian Overlay Kontrol Jendela yang memeriksa apakah nilai display_override ada dalam Manifes dan memberikan link ke dokumentasi yang relevan.
• Kolom Sumber > Hierarki Halaman kini melakukan hal berikut, termasuk, tetapi tidak terbatas pada (1442863):
  • Folder akan berwarna abu-abu jika semua kontennya tercantum dalam daftar yang diabaikan.
  • Mewarnai folder dengan warna oranye jika semua kontennya berasal dari peta sumber.
• Performa: Setelan Rekaman kini otomatis disembunyikan saat Anda memulai perekaman (1455498).
• Sumber > Editor memulihkan perilaku Ctrl + Arrow (Menang) dan Opt + Arrow (MacO) (1468208).
• Animasi > Tombol Jeda semua kini mempertahankan statusnya di seluruh pemuatan halaman (1446046).
• Aplikasi > Penyimpanan > Cache storage dipindahkan ke Application > Penyimpanan > Bagian cache (1462622).
• Beberapa teks dan tooltip UI ditingkatkan: tooltip konkurensi hardware, Teks filter jaringan dan opsi menu utama, penggunaan huruf besar di Tampilan hierarki aplikasi, Jaringan > Teks header, Sumber > Penggantian dan Teks sistem file.

Fitur eksperimental baru

Emulasi rendering baru: prefers-reduced-transparency

Pengguna situs Anda dapat mulai mengaktifkan fitur media CSS prefers-reduced-transparency eksperimental baru di perangkat mereka untuk menunjukkan preferensi mereka guna mengurangi efek transparan. Anda dapat mempertimbangkan preferensi ini untuk meningkatkan aksesibilitas situs web Anda. Untuk membantu Anda, tab panel samping Rendering kini dapat mengemulasi setelan prefers-reduced-transparency: reduce, sehingga Anda dapat membuat prototipe solusi dan menguji perilaku situs dalam kasus ini.

Untuk menguji fitur ini di Chrome, aktifkan fitur Platform Web Eksperimental di chrome://flags.

Masalah Chromium: 1424879.

Pemantau Protokol yang Ditingkatkan

Chrome DevTools menggunakan Protokol Chrome DevTools (CDP) untuk menginstrumentasikan, memeriksa, men-debug, dan membuat profil browser Chrome. Jika Anda adalah developer Chromium atau DevTools, pemantau protokol memberi Anda cara untuk melihat semua permintaan dan respons CDP yang dibuat oleh DevTools dan mengirim perintah CDP.

Protokol monitor mendapatkan antarmuka baru yang dapat Anda gunakan untuk membuat dan mengirim perintah CDP dengan lebih mudah. Sekarang Anda tidak perlu mencari perintah dan parameternya dalam dokumentasi, DevTools akan menyarankannya kepada Anda.

Di pojok kanan bawah tab panel samping Protocol monitor, klik Show CDP command editor, pilih target, mulai ketik perintah, pilih salah satu perintah yang disarankan, jika perlu, tentukan nilai parameter, lalu klik Send command (Ctrl/Cmd + Enter).

Masalah Chromium: 1469345.

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.
• Beri komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.

Yang baru di DevTools

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