Yang Baru di DevTools (Chrome 88)

Startup DevTools lebih cepat

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

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

Akan ada postingan blog engineering mendatang yang menjelaskan penerapan ini secara mendetail. Nantikan kabar terbarunya.

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 (misalnya, background: linear-gradient(angle, color-stop1, color-stop2), transform: rotate(angle)), ikon jam akan ditampilkan di samping sudut di panel Styles. Klik ikon jam untuk mengalihkan tampilan jam. Klik di mana saja pada jam atau tarik jarum untuk mengubah sudutnya!

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

Masalah Chromium: 1126178, 1138633

Emulasi 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 menampilkan gambar dalam AVIF dan WebP untuk browser yang lebih baru, dengan gambar PNG pengganti 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", lalu muat ulang halaman. Arahkan kursor ke img src. Gambar saat ini src (currentSrc) sekarang menjadi gambar WebP penggantian.

Mengemulasi jenis gambar

Masalah Chromium: 1130556

Menyimulasikan ukuran kuota penyimpanan di panel Storage

Anda kini 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 Aplikasi > 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 Data Web baru di rekaman panel Performa

Rekaman performa kini memiliki opsi untuk menampilkan informasi Data Web.

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

Jalur saat ini menampilkan informasi Data Web 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 Tanda Vital Web.

Jalur Data Web

Masalah Chromium: T/A

Laporkan error CORS di panel Jaringan

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

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

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

Error CORS

Masalah Chromium: 1141824

Pembaruan tampilan detail frame

Informasi isolasi lintas asal di tampilan detail Frame

Status isolasi 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 penggunaan akan ditampilkan jika SAB dan postMessage() saat ini tersedia, tetapi konteksnya tidak diisolasi lintas origin. Pelajari lebih lanjut isolasi lintas asal dan alasan isolasi diperlukan untuk fitur seperti SharedArrayBuffers dalam artikel ini.

Informasi lintas asal

Masalah Chromium: 1139899

Informasi Web Worker baru dalam tampilan detail Frame

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

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

Informasi pekerja web

Masalah Chromium: 1122507, 1051466

Tampilkan detail frame pembuka untuk jendela yang terbuka

Anda sekarang dapat melihat detail tentang bingkai mana yang menyebabkan jendela lain dibuka.

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

Detail frame pembuka

Masalah Chromium: 1107766

Buka panel Network dari panel Service Workers

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

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

Buka 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 Jaringan, klik permintaan jaringan untuk membuka panel Header. Klik kanan pada salah satu properti di bagian ini: Request Payload (JSON) Form Data Query String Parameters Request Headers Response Headers

Kemudian, Anda dapat memilih Copy value 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 saat pembongkaran WebAssembly (Wasm) selagi dijeda pada titik henti sementara, DevTools kini menampilkan nilai variabel saat ini.

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

Lihat pratinjau variabel Wasm saat kursor diarahkan

Masalah Chromium: 1058836, 1071432

Mengevaluasi variabel Wasm di Konsol

Sekarang Anda dapat mengevaluasi variabel Wasm di Konsol saat dijeda pada titik henti sementara.

Dalam contoh ini, kita menempatkan titik henti sementara pada baris local.get $input. Saat 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 sekarang secara konsisten menggunakan kB untuk menampilkan ukuran file/memori. Sebelumnya DevTools menggabungkan kB (1.000 byte) dan KiB (1.024 byte). Misalnya, panel Network sebelumnya menggunakan label "kB", tetapi sebenarnya melakukan penghitungan menggunakan KiB, yang menyebabkan kebingungan yang tidak perlu.

Masalah Chromium: 1035309

Menyoroti elemen pseudo di panel Elements

DevTools telah meningkatkan kontras warna elemen pseudo agar Anda dapat menemukan elemen dengan lebih baik.

Menyoroti elemen pseudo

Masalah Chromium: 1143833

Fitur eksperimental

Alat proses debug CSS Flexbox

Alat proses debug Flexbox segera hadir!

Sebagai permulaan, DevTools sekarang menampilkan badge flex di panel Elements 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 peka konteks. Arah ikon akan disesuaikan dengan:

  • flex-direction
  • direction
  • writing-mode

Ikon-ikon ini bertujuan untuk membantu Anda memvisualisasikan tata letak {i>flexbox<i} 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

Sesuaikan 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 Setelan > Pintasan, arahkan kursor ke perintah, lalu klik tombol Edit (ikon pena) untuk menyesuaikan pintasan akor.

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