Yang Baru di DevTools (Chrome 88)

Jecelyn Yeen

Startup DevTools yang lebih cepat

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

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

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

Jika 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 mengaktifkan/menonaktifkan overlay 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

Meniru 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 menguji berbagai skenario pemuatan gambar tanpa harus beralih browser.

Misalkan kita memiliki kode HTML berikut untuk menayangkan gambar dalam format AVIF dan WebP untuk browser yang lebih baru, dengan gambar PNG pengganti untuk browser yang lebih 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. Src gambar saat ini (currentSrc) kini menjadi gambar WebP pengganti.

Masalah Chromium: 1130556

Menyimulasikan ukuran kuota penyimpanan di panel Penyimpanan

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

Buka Aplikasi > Penyimpanan, centang kotak Simulasikan kuota penyimpanan kustom, dan masukkan angka yang valid untuk menyimulasikan kuota penyimpanan.

Masalah Chromium: 945786, 1146985

Jalur Web Vitals baru dalam rekaman panel Performa

Rekaman performa kini memiliki opsi untuk menampilkan informasi Data Web.

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

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

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

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

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

Masalah Chromium: 1141824

Pembaruan tampilan detail frame

Informasi isolasi lintas origin di tampilan Detail frame

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

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

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

Masalah Chromium: 1139899

Informasi Web Workers baru di tampilan Detail frame

DevTools kini menampilkan web worker khusus di bawah frame yang membuatnya.

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

Masalah Chromium: 1122507, 1051466

Menampilkan detail frame pembuka untuk jendela yang dibuka

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

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

Masalah Chromium: 1107766

Membuka panel Jaringan dari panel Pekerja Layanan

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

Masalah Chromium: T/A

Opsi salin baru di panel Jaringan

Menyalin nilai properti

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

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

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

Masalah Chromium: 1132084

Menyalin stacktrace untuk inisiator jaringan

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

Masalah Chromium: 1139615

Update proses debug Wasm

Melihat pratinjau nilai variabel Wasm saat mengarahkan kursor

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

Di panel Sources, buka file Wasm, tetapkan 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 Konsol saat dijeda pada titik henti sementara.

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

Masalah Chromium: 1127914

Satuan ukuran yang konsisten untuk ukuran file/memori

DevTools kini secara konsisten menggunakan kB untuk menampilkan ukuran file/memori. Sebelumnya, DevTools mencampur kB (1000 byte) dan KiB (1024 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 semu di panel Elemen

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

Masalah Chromium: 1143833

Fitur eksperimental

Alat proses debug CSS Flexbox

Alat proses debug Flexbox akan segera hadir.

Sebagai permulaan, DevTools kini 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 ini bersifat kontekstual. Arah ikon akan disesuaikan berdasarkan:

• flex-direction
• direction
• writing-mode

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 akor

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

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

Buka Setelan > Pintasan, arahkan kursor ke perintah, lalu klik tombol Edit (ikon pena) untuk menyesuaikan pintasan akor.

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, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk mendiskusikan fitur baru, update, atau hal lain yang terkait dengan DevTools.

• Kirimkan masukan dan permintaan fitur kepada kami di crbug.com.
• Laporkan masalah DevTools menggunakan more_vert Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet di @ChromeDevTools.
• Tinggalkan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.

Yang baru di DevTools

Daftar semua hal yang telah dibahas dalam seri Yang baru di DevTools.