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 pengoptimalan untuk mengurangi overhead performa serialisasi, penguraian, dan deserialisasi selama startup.

Akan ada postingan blog 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.

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 mengaktifkan overlay jam. Klik di mana saja pada jam atau tarik 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

Mengemulasikan jenis gambar yang tidak didukung

DevTools menambahkan dua emulasi baru di tab Rendering, yang memungkinkan Anda 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 untuk browser yang lebih baru, dengan gambar PNG penggantian 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 penggantian.

Mengemulasikan jenis gambar

Masalah Chromium: 1130556

Menyimulasikan ukuran kuota penyimpanan di panel Penyimpanan

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 yang 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 Data Web baru di 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.

Jalur ini 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 Data Web.

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 Jaringan, amati permintaan jaringan CORS yang gagal. Kolom status menampilkan "error CORS". Arahkan kursor ke error, tooltip kini akan menampilkan kode error. Sebelumnya, DevTools hanya menampilkan status "(failed)" umum untuk error CORS.

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

Error CORS

Masalah Chromium: 1141824

Update tampilan detail frame

Informasi isolasi lintas origin di tampilan detail Frame

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

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

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

Informasi lintas origin

Masalah Chromium: 1139899

Informasi Web Worker baru di tampilan detail Frame

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

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

Informasi pekerja web

Masalah Chromium: 1122507, 1051466

Menampilkan detail bingkai pembuka untuk jendela yang terbuka

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

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

Detail frame pembuka

Masalah Chromium: 1107766

Membuka panel Jaringan dari panel Service Workers

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

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

Membuka panel Jaringan dari Service Worker

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.

Menyalin nilai properti

Di panel Jaringan, klik permintaan jaringan untuk membuka panel Header. Klik kanan salah satu properti di 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

Menyalin stacktrace untuk inisiator jaringan

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

Menyalin stacktrace

Masalah Chromium: 1139615

Update proses debug Wasm

Lihat pratinjau nilai variabel Wasm saat kursor diarahkan

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

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

Melihat pratinjau variabel Wasm saat mengarahkan kursor

Masalah Chromium: 1058836, 1071432

Mengevaluasi variabel Wasm di Konsol

Anda kini dapat mengevaluasi variabel Wasm di Konsol saat dijeda di 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 hal 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 mencampurkan 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 pseudo

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.

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

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

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

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

Pintasan keyboard akord

Masalah Chromium: 174309

Mendownload saluran pratinjau

Sebaiknya gunakan 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 sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

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

Yang baru di DevTools

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