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

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 akses DevTools ke folder tersebut.

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

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

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

Ikon penggantian di samping permintaan dalam panel Jaringan.

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

Bagian 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) sekarang mengurai respons dengan benar dan memungkinkan Anda memperkuatnya.

Sebelum dan sesudah mengurai subjenis application/json dalam pratinjau respons jaringan.

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.

Sebelum dan sesudah menampilkan perubahan dalam prioritas pengambilan.

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

Kolom Priority di panel Jaringan.

Masalah Chromium: 1463901, 1380964.

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

Opsi Setelan. Setelan > Preferensi > Kotak centang. 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 Ciutkan.. Klik {...} untuk meluaskan lagi pemblokiran.

Selain itu, Setelan. Setelan > Preferensi > Kotak centang. Tampilkan file di bilah sisi 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.

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

Masalah cookie pihak ketiga yang dilaporkan di tab Masalah.

Selain itu, filter Kotak centang. Cookie respons yang diblokir di panel Jaringan telah disusun ulang untuk memperjelas bahwa filter tersebut 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.

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.

Sebelum dan sesudah menerapkan 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:

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 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).
  • Application > Manifest sekarang memiliki bagian Overlay Kontrol Jendela yang memeriksa apakah nilai display_override ada di 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 Rekaman 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 bagian (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 Panel kiri terbuka. Show CDP command editor, pilih target, mulai ketik perintah, pilih salah satu perintah yang disarankan, jika perlu, tentukan parameter value, lalu klik Kirim. Send command (Ctrl/Cmd + Enter).

Menetapkan 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, 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   Lainnya   > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Tulis 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

109 Chrome

Chrome 108

Chrome 107

106 Chrome

105 Chrome

104 Chrome

103 Chrome

102 Chrome

101 Chrome

100 Chrome

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 dibatalkan.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59