Yang Baru di DevTools (Chrome 88)

Jecelyn Yeen

Memulai DevTools lebih cepat

Startup DevTools sekarang ~37% lebih cepat dalam hal kompilasi JavaScript (dari 6,9 detik menjadi 5 detik)! 🎉

Tim melakukan pengoptimalan untuk mengurangi overhead performa serialisasi, penguraian, dan deserialisasi selama startup.

Akan ada postingan blog tentang engineering mendatang yang menjelaskan penerapannya secara mendetail. Nantikan kabar terbaru.

Masalah Chromium: 1029427

Alat visualisasi sudut CSS baru

DevTools kini memiliki dukungan yang lebih baik untuk proses debug sudut CSS.

Sudut CSS

Saat elemen HTML di halaman Anda menerapkan sudut CSS pada elemen tersebut (misalnya background: linear-gradient(angle, color-stop1, color-stop2), transform: rotate(angle)), ikon jam akan ditampilkan di sebelah sudut di panel Styles. Klik ikon jam untuk menampilkan/menyembunyikan tampilan jam. Klik di mana saja pada jam atau seret jarum untuk mengubah sudutnya!

Ada pintasan mouse dan keyboard untuk mengubah nilai sudut juga, lihat dokumentasi kami untuk mempelajari lebih lanjut.

Masalah Chromium: 1126178, 1138633

Emulasikan jenis gambar yang tidak didukung

DevTools menambahkan dua emulasi baru di tab Rendering sehingga Anda dapat menonaktifkan format gambar AVIF dan WebP. Emulasi baru ini memudahkan developer untuk menguji berbagai skenario pemuatan gambar tanpa harus beralih browser.

Misalkan kita memiliki kode HTML berikut untuk menayangkan gambar dalam AVIF dan WebP pada browser yang lebih baru, dengan gambar PNG penggantian untuk browser lama.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Buka tab Rendering, pilih "Disable AVIF image format" dan muat ulang halaman. Arahkan kursor ke img src. Gambar src saat ini (currentSrc) kini menjadi gambar WebP penggantian.

Emulasikan jenis gambar

Masalah Chromium: 1130556

Menyimulasikan ukuran kuota penyimpanan di panel Storage

Anda sekarang dapat mengganti ukuran kuota penyimpanan di panel Storage. Fitur ini memberi Anda kemampuan untuk menyimulasikan berbagai perangkat dan menguji perilaku aplikasi dalam skenario ketersediaan disk rendah.

Buka Application > Storage, aktifkan kotak centang Simulasikan kuota penyimpanan kustom, lalu masukkan angka yang valid untuk menyimulasikan kuota penyimpanan.

Menyimulasikan ukuran kuota penyimpanan

Masalah Chromium: 945786, 1146985

Jalur Web Vitals baru di rekaman panel Performa

Rekaman performa kini memiliki opsi untuk menampilkan informasi Data Web.

Setelah merekam performa pemuatan, aktifkan kotak centang Web Vitals di panel Performa untuk melihat jalur Data Web baru.

Saat ini jalur menampilkan informasi Web Vitals seperti First Contentful Paint (FCP), Largest Contentful Paint (LCP), dan Layout Shift (LS).

Lihat web.dev/vitals untuk mempelajari lebih lanjut cara mengoptimalkan pengalaman pengguna dengan metrik Web Vitals.

Jalur Data Web

Masalah Chromium: T/A

Melaporkan error CORS di panel Jaringan

DevTools kini menampilkan error CORS jika permintaan jaringan gagal karena Cross-Origin Resource Sharing (CORS).

Di panel Network, amati permintaan jaringan CORS yang gagal. Kolom status menampilkan "error CORS". Arahkan kursor ke error tersebut, tooltip kini menampilkan kode error. Sebelumnya, DevTools hanya menampilkan status "(failed)" umum untuk error CORS.

Hal ini menjadi dasar peningkatan berikutnya dalam upaya memberikan deskripsi yang lebih mendetail tentang masalah CORS.

Error CORS

Masalah Chromium: 1141824

Pembaruan tampilan detail frame

Informasi isolasi lintas asal dalam tampilan detail Frame

Status terisolasi lintas origin kini ditampilkan di bagian Keamanan & Isolasi.

Bagian ketersediaan API yang baru menampilkan ketersediaan SharedArrayBuffer (SAB) dan apakah keduanya dapat dibagikan menggunakan postMessage().

Peringatan penghentian akan muncul jika SAB dan postMessage() saat ini tersedia, tetapi konteksnya tidak diisolasi lintas origin. Pelajari lebih lanjut isolasi lintas asal dan alasan isolasi tersebut diperlukan untuk fitur seperti SharedArrayBuffers dalam artikel ini.

Informasi lintas origin

Masalah Chromium: 1139899

Informasi Web Workers baru dalam tampilan detail Frame

DevTools kini menampilkan pekerja web khusus di bawah bingkai yang membuatnya.

Di panel Application, luaskan frame dengan pekerja web, lalu pilih pekerja dalam hierarki Workers untuk melihat detail pekerja web.

Informasi pekerja web

Masalah Chromium: 1122507, 1051466

Tampilkan detail frame pembuka untuk jendela yang terbuka

Sekarang Anda dapat melihat detail tentang bingkai mana yang menyebabkan pembukaan Jendela lain.

Pilih jendela yang terbuka pada hierarki Frame untuk melihat detail jendela. Klik link Opener Frame untuk membuka pembuka di panel Elemen.

Detail frame pembuka

Masalah Chromium: 1107766

Membuka panel Network dari panel Service Workers

Melihat semua informasi perutean permintaan pekerja layanan (SW) dengan link Permintaan jaringan baru. Hal ini memberikan konteks tambahan kepada developer saat men-debug SW.

Buka Application > Service Workers, klik Network requests pada SW. Panel Network dibuka di panel bawah yang menampilkan semua permintaan terkait pekerja layanan (permintaan jaringan difilter berdasarkan "is:service-worker-intercepted").

Membuka panel Network dari Service Workers

Masalah Chromium: T/A

Opsi penyalinan baru di panel Jaringan

Salin nilai properti

Opsi "Salin nilai" baru di menu konteks memungkinkan Anda menyalin nilai properti permintaan jaringan.

Salin nilai properti

Di panel Network, klik permintaan jaringan untuk membuka panel Headers. Klik kanan salah satu properti di bagian ini: Request Payload (JSON) Parameter String Kueri Data Formulir Request Headers Response Headers

Kemudian, Anda dapat memilih Salin nilai untuk menyalin nilai properti ke papan klip.

Masalah Chromium: 1132084

Salin stacktrace untuk inisiator jaringan

Klik kanan permintaan jaringan, lalu pilih Copy stacktrace untuk menyalin stacktrace ke papan klip Anda.

Salin pelacakan tumpukan

Masalah Chromium: 1139615

Update proses debug Wasm

Pratinjau nilai variabel Wasm saat kursor diarahkan

Saat mengarahkan kursor ke variabel dalam pembongkaran WebAssembly (Wasm) saat dijeda pada titik henti sementara, DevTools kini menampilkan nilai saat ini variabel.

Di panel Sources, buka file Wasm, masukkan titik henti sementara, lalu muat ulang halaman. Arahkan kursor ke variabel untuk melihat nilainya.

Pratinjau variabel Wasm saat mouse diarahkan

Masalah Chromium: 1058836, 1071432

Mengevaluasi variabel Wasm di Konsol

Anda kini dapat mengevaluasi variabel Wasm di Console saat dijeda pada titik henti sementara.

Dalam contoh ini, kita menempatkan titik henti sementara pada baris local.get $input. Saat melakukan proses debug, ketik $input di Konsol akan menampilkan nilai variabel saat ini, yaitu 4 dalam kasus ini.

Mengevaluasi variabel Wasm di Konsol

Masalah Chromium: 1127914

Unit pengukuran yang konsisten untuk ukuran file/memori

DevTools kini secara konsisten menggunakan kB untuk menampilkan ukuran file/memori. Sebelumnya, DevTools menggabungkan kB (1.000 byte) dan KiB (1.024 byte). Misalnya, panel Jaringan sebelumnya menggunakan label "kB", tetapi sebenarnya melakukan penghitungan menggunakan KiB, yang menyebabkan kebingungan yang tidak perlu.

Masalah Chromium: 1035309

Menyoroti elemen pseudo di panel Elemen

DevTools telah meningkatkan kontras warna elemen semu untuk membantu Anda mengenalinya dengan lebih baik.

Menyoroti elemen semu

Masalah Chromium: 1143833

Fitur eksperimental

Alat proses debug CSS Flexbox

Alat proses debug Flexbox akan segera hadir.

Sebagai pemicu, DevTools kini menampilkan badge flex di panel Elemen untuk elemen dengan display: flex yang diterapkan padanya.

Selain itu, ikon perataan baru ditambahkan di properti flexbox berikut:

  • flex-direction
  • align-items
  • align-content
  • align-self
  • justify-items
  • justify-content

Selain itu, ikon-ikon ini juga kontekstual. Arah ikon akan disesuaikan dengan:

  • flex-direction
  • direction
  • writing-mode

Ikon-ikon ini bertujuan untuk membantu Anda memvisualisasikan tata letak flexbox halaman dengan lebih baik.

Proses debug CSS Flex

Berikut adalah dokumen desain fitur alat Flexbox. Fitur lainnya akan segera ditambahkan.

Cobalah dan beri tahu kami pendapat Anda.

Masalah Chromium: 1144090, 1139945

Menyesuaikan pintasan keyboard chord

DevTools menambahkan dukungan eksperimental untuk menyesuaikan pintasan keyboard sejak rilis terakhir.

Sekarang Anda dapat membuat akor (alias pintasan multi-tombol) di editor pintasan.

Buka Settings > Shortcuts, arahkan kursor ke perintah, lalu klik tombol Edit (ikon pena) untuk menyesuaikan pintasan chord.

Pintasan keyboard chord

Masalah Chromium: 174309

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