Yang Baru di DevTools (Chrome 117)

Sofia Emelianova
Sofia Emelianova
GitHub

Peningkatan panel Jaringan

Ganti konten web lokal dengan lebih cepat

Fitur penggantian lokal kini disederhanakan, sehingga Anda dapat dengan mudah membuat tiruan header respons dan konten web resource jarak jauh dari panel Jaringan tanpa akses ke resource tersebut.

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

Opsi penggantian di menu drop-down permintaan.

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 DevTools mengaksesnya.

Pilih folder dan izinkan akses ke folder tersebut di panel tindakan di bagian atas.

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

Perlu diketahui bahwa resource yang diganti ditunjukkan dengan Disimpan. di panel Network. Arahkan kursor ke ikon untuk melihat apa yang diganti.

Ikon penggantian di samping permintaan di panel Jaringan.

Masalah Chromium: 1465785, 1470532, 1469359.

Mengganti konten XHR dan permintaan pengambilan

Anda kini dapat mengganti konten XHR dan permintaan pengambilan selain header responsnya. Dengan penggantian tersebut, Anda dapat membuat tiruan 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 membuat opsi Ganti konten berwarna abu-abu untuk jenis yang tidak didukung.

Masalah Chromium: 792101, 1469776.

Menyembunyikan permintaan ekstensi Chrome

Untuk membantu Anda berfokus pada kode yang Anda tulis dan memfilter permintaan yang 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 URL chrome-extension://, centang Kotak centang. Sembunyikan URL ekstensi.

URL ekstensi disembunyikan dari tabel permintaan.

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.

Sebelum dan sesudah menampilkan kode status HTTP yang dapat dibaca manusia.

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) kini mengurai respons dengan benar dan memungkinkan Anda mempercantiknya.

Sebelum dan sesudah menguraikan subjenis aplikasi/json dalam pratinjau respons jaringan.

Masalah Chromium: 406900.

Performa: Melihat perubahan prioritas pengambilan untuk peristiwa jaringan

Panel Performa kini menampilkan dua kolom prioritas di Ringkasan peristiwa di jalur Jaringan: Prioritas Awal dan Prioritas (akhir), bukan hanya satu Prioritas. Dengan kolom tambahan ini, Anda kini dapat melihat apakah prioritas pengambilan peristiwa berubah dan menyesuaikan urutan download. Untuk mengetahui informasi selengkapnya, lihat Mengoptimalkan pemuatan resource dengan Fetch Priority API.

Sebelum dan sesudah menampilkan perubahan dalam prioritas pengambilan.

Selain itu, Anda dapat menemukan informasi yang sama di kolom Prioritas pada panel Jaringan, dengan setelan Kotak centang. Baris permintaan besar diaktifkan.

Kolom Prioritas di panel Jaringan.

Masalah Chromium: 1463901, 1380964.

Setelan sumber diaktifkan secara default: Penggabungan kode dan tampilan file otomatis

Opsi Setelan. Setelan > Preferensi > Kotak centang. Pengemasan kode kini diaktifkan secara default. Opsi ini memungkinkan Anda melipat blok kode.

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

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

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

Masalah Chromium: 1459193, 1336599.

Peningkatan proses debug masalah cookie pihak ketiga

Untuk membantu membuat web yang lebih pribadi dan sejalan dengan update oleh 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 linimasa penghentian bertahap agar Anda dapat beradaptasi dengan perubahan dengan nyaman.

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

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

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

Jika ingin melihat peringatan cookie tentang penghentian mendatang sebagai pengguna Chrome yang sudah ada, pastikan untuk mencentang kotak ini.

Untuk mengujinya, periksa cookie di halaman demo ini.

Masalah cookie pihak ketiga yang dilaporkan di tab Masalah.

Selain itu, filter Kotak centang. Blocked response cookies di panel Network telah diubah bentuknya untuk memperjelas bahwa filter ini hanya menampilkan cookie respons yang diblokir.

Kotak centang diaktifkan dan hanya menampilkan permintaan berisi 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.

Di halaman demo ini, di bagian Application > Preloading, Anda dapat memeriksa:

  • Aturan Spekulasi yang mencantumkan semua kumpulan aturan yang ditemukan di halaman saat ini.
  • Pemuatan awal yang mencantumkan semua URL yang dimuat sebelumnya dan dirender sebelumnya dari kumpulan aturan.
  • Halaman Ini yang mencantumkan status pra-rendering halaman saat ini.

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

Masalah Chromium: 1410709.

Warna baru

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

Sebelum dan sesudah menerapkan warna baru.

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

Masalah Chromium: 1456677.

Lighthouse 10.4.0

Panel Lighthouse kini menjalankan Lighthouse 10.4.0. Yang paling penting, versi ini menambahkan audit aksesibilitas baru untuk hal berikut:

Contoh:

Gagal memeriksa warna link yang membuatnya tidak dapat dibedakan.

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 bersifat open source

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

Pelajari cara mem-build, menjalankan, dan menguji ekstensi, serta jangan ragu untuk berkontribusi.

Masalah Chromium: 1410709.

Sorotan lainnya

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Penyusunan CSS: Panel Elemen kini menampilkan seluruh rantai pemilih untuk turunan bertingkat (1172985).
  • Application > Manifest kini memiliki bagian Window Controls Overlay yang memeriksa apakah nilai display_override ada dalam Manifes dan memberikan link ke dokumentasi yang relevan.
  • Hierarki Sumber > 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 Perekaman kini otomatis disembunyikan saat Anda memulai perekaman (1455498).
  • Sumber > Editor memulihkan perilaku Ctrl + Arrow (Menang) dan Opt + Arrow (MacO) (1468208).
  • Tombol Animasi > Jeda semua kini mempertahankan statusnya di seluruh pemuatan halaman (1446046).
  • Application > Storage > Cache storage dipindahkan ke Application > Storage > Cache section (1462622).
  • Beberapa teks dan tooltip UI ditingkatkan: Tooltip konkurensi hardware, Teks filter jaringan dan opsi menu utama, kapitalisasi dalam 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 dalam 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 Anda dalam hal 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.

Pemantau protokol mendapatkan antarmuka baru untuk memudahkan Anda membuat dan mengirim perintah CDP. Sekarang Anda tidak perlu mencari perintah dan parameternya dalam dokumentasi, DevTools akan menyarankannya kepada Anda.

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

Menetapkan dan mengirim perintah CDP.

Masalah Chromium: 1469345.

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.