Yang Baru di DevTools (Chrome 88)

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 beban performa serialisasi, penguraian, dan proses deserialisasi selama proses startup.

Akan ada postingan blog tentang engineering mendatang yang menjelaskan penerapannya 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.

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

Ada juga pintasan {i>mouse<i} dan {i>keyboard<i} untuk mengubah nilai sudut, lihat dokumentasi 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 gambar AVIF dan WebP format font. Emulasi baru ini memudahkan developer untuk menguji pemuatan gambar yang berbeda skenario tanpa harus beralih browser.

Misalkan kita memiliki kode HTML berikut untuk menyajikan gambar dalam AVIF dan WebP pada 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 "Nonaktifkan format gambar AVIF" lalu muat ulang halaman. Arahkan kursor ke img src. Gambar src saat ini (currentSrc) kini menjadi gambar WebP penggantian.

Masalah Chromium: 1130556

Menyimulasikan ukuran kuota penyimpanan di panel Storage

Anda sekarang dapat mengganti ukuran kuota penyimpanan di panel Storage. Fitur ini membuat Anda dapat melakukan simulasi perangkat yang berbeda dan menguji perilaku aplikasi Anda dalam skenario ketersediaan disk rendah.

Buka Application > Storage, aktifkan kotak centang Simulasikan kuota penyimpanan kustom, lalu masukkan angka yang valid untuk menyimulasikan 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 Web Metrik Android vitals.

Masalah Chromium: T/A

Melaporkan 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 ". Arahkan kursor ke error tersebut, tooltip kini menampilkan kode error. Sebelumnya, khusus DevTools menampilkan status "(failed)" umum untuk error CORS.

Hal ini menjadi dasar bagi penyempurnaan kami berikutnya dalam memberikan deskripsi yang lebih terperinci tentang Soal CORS!

Masalah Chromium: 1141824

Pembaruan tampilan detail frame

Informasi isolasi lintas asal dalam tampilan detail Frame

Status terisolasi lintas asal kini ditampilkan di bagian Keamanan & Bagian isolasi.

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

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

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 web worker, lalu pilih pekerja di bagian Hierarki Workers untuk melihat detail 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 pada Pembuka Frame untuk menampilkan pembuka di panel Elemen.

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. Tujuan Panel Network dibuka di panel bawah yang menampilkan semua permintaan terkait pekerja layanan ( permintaan jaringan difilter menurut &quot;is:service-worker-intercepted&quot;).

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

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

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 Salin stacktrace untuk menyalin stacktrace ke papan klip.

Masalah Chromium: 1139615

Update proses debug Wasm

Lihat pratinjau nilai variabel Wasm saat kursor diarahkan

Saat mengarahkan kursor ke variabel di 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.

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 proses debug, ketik $input di Konsol akan menampilkan nilai variabel saat ini, yaitu 4 dalam kasus ini.

Masalah Chromium: 1127914

Unit pengukuran yang konsisten untuk ukuran file/memori

DevTools kini secara konsisten menggunakan kB untuk menampilkan ukuran file/memori. Sebelumnya DevTools campuran kB (1000 byte) dan KiB (1024 byte). Misalnya, panel Jaringan sebelumnya menggunakan "kB" label tetapi sebenarnya melakukan perhitungan 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.

Masalah Chromium: 1143833

Fitur eksperimental

Alat proses debug CSS Flexbox

Alat proses debug Flexbox akan segera hadir.

Sebagai permulaan, DevTools sekarang menampilkan badge flex di panel Elemen untuk elemen dengan display: flex diterapkan ke kolom tersebut.

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.

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