Yang Baru di DevTools (Chrome 80)

Kayce Basques
Kayce Basques
X GitHub

Dukungan untuk deklarasi ulang let dan class di Konsol

Konsol kini mendukung deklarasi ulang pernyataan let dan class. Ketidakmampuan untuk mendeklarasikan ulang adalah gangguan umum bagi developer web yang menggunakan Konsol untuk bereksperimen dengan kode JavaScript baru.

Misalnya, sebelumnya, saat mendeklarasikan ulang variabel lokal dengan let, Konsol akan menampilkan error:

Screenshot Konsol di Chrome 78 yang menunjukkan bahwa deklarasi ulang let gagal.

Sekarang, Konsol mengizinkan deklarasi ulang:

Screenshot Konsol di Chrome 80 yang menunjukkan bahwa deklarasi ulang let berhasil.

Masalah Chromium #1004193

Peningkatan proses debug WebAssembly

DevTools telah mulai mendukung Standar Pen-debugan DWARF, yang berarti peningkatan dukungan untuk melangkah melewati kode, menyetel titik henti sementara, dan menyelesaikan rekaman aktivitas stack dalam bahasa sumber Anda di DevTools. Lihat Proses debug WebAssembly yang ditingkatkan di Chrome DevTools untuk mengetahui kisah selengkapnya.

Screenshot proses debug WebAssembly baru yang didukung DWARF.

Pembaruan panel Jaringan

Rantai Inisiator Permintaan di tab Inisiator

Sekarang Anda dapat melihat inisiator dan dependensi permintaan jaringan sebagai daftar bertingkat. Hal ini dapat membantu Anda memahami alasan resource diminta, atau aktivitas jaringan apa yang disebabkan oleh resource tertentu (seperti skrip).

Screenshot Rantai Inisiator Permintaan di tab Inisiator

Setelah mencatat aktivitas jaringan di panel Jaringan, klik resource, lalu buka tab Pemrakarsa untuk melihat Rantai Pemrakarsa Permintaan:

  • Resource yang diperiksa dicetak tebal. Pada screenshot di atas, https://web.dev/default-627898b5.js adalah resource yang diperiksa.
  • Resource di atas resource yang diperiksa adalah pemrakarsa. Pada screenshot di atas, https://web.dev/bootstrap.js adalah inisiator https://web.dev/default-627898b5.js. Dengan kata lain, https://web.dev/bootstrap.js menyebabkan permintaan jaringan untuk https://web.dev/default-627898b5.js.
  • Resource di bawah resource yang diperiksa adalah dependensi. Pada screenshot di atas, https://web.dev/chunk-f34f99f7.js adalah dependensi https://web.dev/default-627898b5.js. Dengan kata lain, https://web.dev/default-627898b5.js menyebabkan permintaan jaringan untuk https://web.dev/chunk-f34f99f7.js.

Masalah Chromium #842488

Menandai permintaan jaringan yang dipilih di Ringkasan

Setelah Anda mengklik resource jaringan untuk memeriksanya, panel Jaringan kini menempatkan batas biru di sekitar resource tersebut di Ringkasan. Hal ini dapat membantu Anda mendeteksi apakah permintaan jaringan terjadi lebih awal atau lebih lambat dari yang diharapkan.

Screenshot panel Ringkasan yang menandai resource yang diperiksa.

Masalah Chromium #988253

Kolom URL dan jalur di panel Jaringan

Gunakan kolom Jalur dan URL baru di panel Jaringan untuk melihat jalur absolut atau URL lengkap setiap resource jaringan.

Screenshot kolom Jalur dan URL baru di panel Jaringan.

Klik kanan header tabel Waterfall, lalu pilih Path atau URL untuk menampilkan kolom baru.

Masalah Chromium #993366

String Agen Pengguna yang diperbarui

DevTools mendukung penetapan string Agen Pengguna kustom melalui tab Kondisi Jaringan. String User-Agent memengaruhi header HTTP User-Agent yang dilampirkan ke resource jaringan, dan juga nilai navigator.userAgent.

String Agen Pengguna yang telah ditentukan sebelumnya telah diupdate untuk mencerminkan versi browser modern.

Screenshot menu Agen Pengguna di tab Kondisi Jaringan.

Untuk mengakses Kondisi Jaringan, buka Menu Perintah dan jalankan perintah Show Network Conditions.

Masalah Chromium #1029031

Pembaruan panel audit

UI konfigurasi baru

UI konfigurasi memiliki desain responsif baru, dan opsi konfigurasi pembatasan telah disederhanakan. Lihat Pembatasan Panel Audit untuk mengetahui informasi selengkapnya tentang perubahan UI pembatasan.

UI konfigurasi baru.

Pembaruan tab cakupan

Mode cakupan per fungsi atau per blok

Tab Cakupan memiliki menu dropdown baru yang memungkinkan Anda menentukan apakah data cakupan kode harus dikumpulkan per fungsi atau per blok. Cakupan per blok lebih mendetail, tetapi juga jauh lebih mahal untuk dikumpulkan. DevTools kini menggunakan cakupan per fungsi secara default.

Menu dropdown mode cakupan.

Cakupan kini harus dimulai dengan memuat ulang halaman

Mengaktifkan/menonaktifkan cakupan kode tanpa memuat ulang halaman telah dihapus karena data cakupan tidak dapat diandalkan. Misalnya, fungsi dapat dilaporkan sebagai tidak digunakan jika eksekusinya sudah lama dan pengumpul sampah V8 telah membersihkannya.

Masalah Chromium #1004203

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.

Yang baru di DevTools

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