Yang Baru di DevTools (Chrome 117)

Sofia Emelianova
Sofia Emelianova
GitHub

Peningkatan panel jaringan

Mengganti konten web secara lokal lebih cepat

Fitur penggantian lokal kini disederhanakan, sehingga Anda dapat dengan mudah meniru header respons dan konten web dari resource jarak jauh dari panel Network 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 belum menyiapkannya, DevTools akan meminta Anda dalam panel tindakan di bagian atas. Pilih folder untuk menyimpan penggantian dan izinkan DevTools mengaksesnya.

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

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

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

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 meniru respons API untuk men-debug halaman web meskipun backend dan API belum siap.

DevTools saat ini mendukung penggantian konten untuk jenis permintaan berikut: gambar (misalnya, avif, png), font, pengambilan dan XHR, skrip (css dan js), dan dokumen (html). DevTools sekarang mengubah opsi Override content ke dalam warna abu-abu untuk jenis yang tidak didukung.

Masalah Chromium: 792101, 1469776.

Menyembunyikan 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 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 lebih cepat mengetahui apa yang terjadi pada permintaan tersebut.

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 Respons untuk permintaan dengan subjenis MIME application/[subtype]+json (misalnya, ld+json, hal+json, dan lainnya) kini mengurai respons dengan benar dan memungkinkan Anda melengkapinya.

Sebelum dan sesudah penguraian subjenis aplikasi/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 Summary untuk peristiwa di jalur Network: Initial Priority dan (final) Priority, bukan hanya menampilkan Priority. 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 Prioritas pada panel Jaringan, dengan setelan Baris permintaan besar Kotak centang. diaktifkan.

Kolom Prioritas di panel Jaringan.

Masalah Chromium: 1463901, 1380964.

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

Opsi Setelan. Setelan > Preferensi > Kotak centang. Lipatan kode sekarang 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 sekarang juga diaktifkan secara default.

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

Masalah Chromium: 1459193, 1336599.

Proses debug yang lebih baik untuk masalah cookie pihak ketiga

Sebagai upaya untuk membantu membuat web yang lebih pribadi dan bersamaan 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 terpakai lagi. Privacy Sandbox memiliki linimasa 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 mempelajari 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, melaporkan:

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

Jika ingin melihat peringatan cookie tentang penghentian penggunaan yang akan datang 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 disusun ulang untuk memperjelas bahwa filter hanya menampilkan cookie respons yang diblokir.

Kotak centang diaktifkan dan hanya menampilkan permintaan berisi cookie respons yang diblokir.

Masalah Chromium: 1458839, 1462693, 1466310.

Debug pramuat di panel Application

Tim Chrome mengembalikan pra-rendering penuh untuk halaman mendatang yang mungkin dibuka oleh pengguna. Agar Anda dapat men-debug proses 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 ke 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 dan dipra-render dari kumpulan aturan.
  • Halaman ini yang mencantumkan status pra-rendering halaman saat ini.

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

Masalah Chromium: 1410709.

Warna baru

Anda mungkin sudah tahu 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 telah disebutkan maupun dicantumkan lebih lanjut, termasuk sejumlah teks UI yang ditingkatkan.

Masalah Chromium: 1456677.

Mercusuar(mercusuar) 10.4.0

Panel Lighthouse sekarang menjalankan Lighthouse 10.4.0. Terutama, 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 sekarang menjadi open source

Ekstensi proses debug C/C++ WebAssembly untuk DevTools kini merupakan 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 WebAssembly C/C++.

Pelajari cara membangun, 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:

  • Tingkatan CSS: Panel Elemen kini menampilkan seluruh rantai pemilih untuk turunan bertingkat (1172985).
  • Aplikasi > Manifes sekarang memiliki bagian Overlay Kontrol Jendela 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 berwarna abu-abu jika semua kontennya masuk ke dalam daftar yang diabaikan.
    • Mewarnai folder dengan warna oranye jika semua kontennya berasal dari peta sumber.
  • Performa: Setelan Screenshot kini otomatis disembunyikan saat Anda memulai perekaman (1455498).
  • Sumber > Editor memulihkan perilaku Ctrl + Arrow (Win) dan Opt + Arrow (MacO) (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 UI dan tooltip telah 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 guna mengurangi efek transparan. Anda dapat mempertimbangkan preferensi ini untuk meningkatkan aksesibilitas situs web Anda. Untuk membantu Anda, tab panel samping Rendering kini dapat mengemulasikan 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 Chrome DevTools Protocol (CDP) untuk menginstrumentasikan, memeriksa, men-debug, dan membuat profil browser Chrome. Jika Anda adalah developer Chromium atau DevTools, Pemantau protokol menyediakan cara untuk melihat semua permintaan dan respons CDP yang dibuat oleh DevTools dan mengirim perintah CDP.

Pemantau protokol mendapatkan antarmuka baru untuk memungkinkan Anda 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. Tampilkan editor perintah CDP, pilih target, mulai ketik perintah, pilih salah satu perintah yang disarankan, jika diperlukan, 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 tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan 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.
  • Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.

Yang Baru di DevTools

Daftar semua hal yang telah dibahas dalam seri What's New In DevTools.

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

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

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