Yang Baru di DevTools (Chrome 117)

Sofia Emelianova
Sofia Emelianova
GitHub

Peningkatan panel Jaringan

Mengganti konten web secara lokal dengan lebih cepat

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

Untuk mengganti konten web, buka panel Network, klik kanan permintaan, lalu pilih Override content.

Opsi penggantian di menu drop-down permintaan.

Jika Anda telah menyiapkan penggantian lokal tetapi menonaktifkannya, 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.

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.

Perhatikan 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 permintaan XHR dan pengambilan

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

Saat ini DevTools mendukung penggantian konten untuk jenis permintaan berikut: gambar (misalnya, avif, png), font, pengambilan dan XHR, skrip (css dan js), dan dokumen (html). DevTools kini mengabui opsi Ganti konten 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 mudah dibaca

Kode Status di header permintaan kini menampilkan teks yang mudah dibaca 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.

Mencetak respons dengan rapi untuk subtipe 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 mengurai subjenis application/json dalam pratinjau respons jaringan.

Masalah Chromium: 406900.

Performa: Lihat perubahan pada prioritas pengambilan untuk peristiwa jaringan

Panel Performa kini menampilkan dua kolom prioritas di Ringkasan peristiwa dalam rekaman Jaringan: Prioritas Awal dan Prioritas (akhir), bukan hanya Prioritas tunggal. 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 Baris permintaan besar Kotak centang. diaktifkan.

Kolom Priority di panel Network.

Masalah Chromium: 1463901, 1380964.

Setelan Sumber yang diaktifkan secara default: Penciutan kode dan penyingkapan 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 ciutkan Ciutkan.. Klik {...} untuk meluaskan blok lagi.

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

Setelan ini membuat pohon file di Sources > Page memilih file saat ini yang terbuka di Editor saat Anda beralih tab.

Masalah Chromium: 1459193, 1336599.

Peningkatan proses debug masalah cookie pihak ketiga

Dalam upaya untuk membantu membangun web yang lebih pribadi dan secara paralel dengan update oleh browser lain, Chrome memperkenalkan inisiatif Privacy Sandbox. Inisiatif ini secara mendasar meningkatkan privasi di web dan dapat mempertahankan web yang sehat dan didukung iklan dengan cara yang akan membuat cookie pihak ketiga tidak lagi diperlukan. Privacy Sandbox memiliki jadwal penghentian bertahap agar Anda dapat beradaptasi dengan perubahan secara nyaman.

Anda sudah dapat menguji perilaku Chrome setelah penghentian penggunaan cookie pihak ketiga. Untuk melakukannya, jalankan Chrome dari command line dengan flag --test-third-party-cookies-phaseout. Untuk mempelajari fungsi tanda 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 penggunaan 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. Cookie respons yang diblokir di panel Jaringan telah diubah kata-katanya 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 pra-pemuatan di panel Aplikasi

Tim Chrome membawa kembali pra-rendering penuh halaman mendatang yang kemungkinan akan dibuka pengguna. Untuk memungkinkan Anda men-debugnya, DevTools menambahkan bagian Pramuat ke panel Aplikasi. Prefetching dan pra-rendering baru (secara kolektif dikenal sebagai "pemuatan awal navigasi") menggunakan Speculation Rules API, bukan petunjuk resource berbasis link.

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

  • Aturan Spekulasi yang mencantumkan semua kumpulan aturan yang ditemukan di halaman saat ini.
  • Pramuat yang mencantumkan semua URL yang telah di-prefetch dan di-prerender dari set aturan.
  • Halaman Ini yang mencantumkan status pra-render halaman saat ini.

Untuk mengetahui informasi selengkapnya, lihat postingan khusus tentang men-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) menghadirkan lebih banyak peningkatan UX ke DevTools, baik yang sudah disebutkan maupun yang tercantum lebih lanjut, termasuk sejumlah teks UI yang ditingkatkan.

Masalah Chromium: 1456677.

Lighthouse 10.4.0

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

Contoh:

Pemeriksaan gagal pada 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 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 membuat, menjalankan, dan menguji ekstensi serta jangan ragu untuk berkontribusi.

Masalah Chromium: 1410709.

Sorotan lain-lain

Berikut beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Penyusunan CSS: Panel Elemen kini menampilkan seluruh rantai pemilih untuk turunan bertingkat (1172985).
  • Aplikasi > Manifes kini memiliki bagian Overlay Kontrol Jendela yang memeriksa apakah nilai display_override ada dalam Manifes dan menyediakan link ke dokumentasi yang relevan.
  • Pohon Sumber > Halaman kini melakukan hal berikut, termasuk, tetapi tidak terbatas pada (1442863):
    • Membuat folder berwarna abu-abu jika semua kontennya masuk dalam daftar abaikan.
    • 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 + Panah (Win) dan Opt + Panah (MacOS) (1468208).
  • Tombol Animasi > Jeda semua kini mempertahankan statusnya di seluruh pemuatan halaman (1446046).
  • Aplikasi > Penyimpanan > Penyimpanan cache dipindahkan ke Aplikasi > Penyimpanan > Bagian cache (1462622).
  • Beberapa teks dan tooltip UI ditingkatkan: Tooltip konkurensi hardware, Teks filter jaringan dan opsi menu utama, kapitalisasi di tampilan hierarki Aplikasi, Teks Jaringan > Header, Teks Sumber > Penggantian dan 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 untuk memperhitungkan preferensi ini guna meningkatkan aksesibilitas situs Anda. Untuk membantu Anda, tab panel Rendering kini dapat mengemulasi setelan prefers-reduced-transparency: reduce, sehingga Anda dapat membuat prototipe solusi dan menguji perilaku situs Anda 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 Chrome DevTools Protocol (CDP) untuk menginstrumentasi, memeriksa, men-debug, dan memprofilkan browser Chrome. Jika Anda adalah developer Chromium atau DevTools, Monitor protokol memberi Anda cara untuk melihat semua permintaan dan respons CDP yang dibuat oleh DevTools dan mengirim perintah CDP.

Monitor protokol mendapatkan antarmuka baru untuk mempermudah 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 Protocol monitor, klik Panel kiri terbuka. Show CDP command editor, pilih target, mulai ketik perintah, pilih salah satu perintah yang disarankan, jika diperlukan, tentukan nilai parameter, lalu klik Kirim. Send command (Ctrl/Cmd + Enter).

Menentukan dan mengirim perintah CDP.

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, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk mendiskusikan fitur baru, update, atau hal lain yang terkait dengan DevTools.

Yang baru di DevTools

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