Yang Baru di DevTools (Chrome 80)

Kayce Basques
Kayce Basques

Dukungan untuk deklarasi ulang let dan class di Konsol

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

Misalnya, sebelumnya, saat mendeklarasikan ulang variabel lokal dengan let, Konsol akan menampilkan {i>error<i}:

Screenshot Konsol di Chrome 78 yang menunjukkan bahwa pernyataan ulang izinkan gagal.

Sekarang, Konsol memungkinkan pernyataan ulang:

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

Masalah Chromium #1004193

Peningkatan proses debug WebAssembly

DevTools mulai mendukung Standar Proses Debug DWARF, yang berarti peningkatan dukungan untuk melangkahi kode, mengatur titik henti sementara, dan menyelesaikan pelacakan tumpukan dalam bahasa sumber dalam DevTools. Lihat Proses debug WebAssembly yang ditingkatkan di Chrome DevTools untuk mengetahui cerita lengkapnya.

Screenshot proses debug WebAssembly baru yang didukung DWARF.

Update panel jaringan

Meminta Rantai Inisiator di tab Inisiator

Sekarang Anda dapat melihat inisiator dan dependensi permintaan jaringan sebagai daftar bertingkat. Hal ini dapat membantu Anda memahami mengapa sumber daya diminta, atau aktivitas jaringan apa yang sebagai skrip).

Screenshot Rantai Inisiator Permintaan di tab Inisiator

Setelah mencatat aktivitas jaringan di panel Jaringan, klik resource, lalu buka Tab Inisiator untuk melihat Request Inisiator Chain:

  • Resource yang diperiksa dicetak tebal. Dalam screenshot di atas, https://web.dev/default-627898b5.js adalah resource yang diperiksa.
  • Resource di atas resource yang diperiksa adalah inisiator. Dalam screenshot di atas, https://web.dev/bootstrap.js adalah inisiator dari https://web.dev/default-627898b5.js. Di kata, https://web.dev/bootstrap.js menyebabkan permintaan jaringan untuk https://web.dev/default-627898b5.js.
  • Resource di bawah resource yang diperiksa adalah dependencies. Dalam screenshot di atas, https://web.dev/chunk-f34f99f7.js adalah dependensi dari https://web.dev/default-627898b5.js. Di beberapa dengan kata lain, https://web.dev/default-627898b5.js menyebabkan permintaan jaringan untuk https://web.dev/chunk-f34f99f7.js.

Masalah Chromium #842488

Menyoroti permintaan jaringan yang dipilih di Ringkasan

Setelah Anda mengklik sumber daya jaringan untuk memeriksanya, panel Jaringan sekarang menempatkan batas biru terhadap resource tersebut di Overview. Hal ini dapat membantu Anda mendeteksi apakah permintaan jaringan terjadi lebih awal atau lebih lambat dari yang diperkirakan.

Screenshot panel Overview 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 jalur lengkap URL setiap resource jaringan.

Screenshot kolom Jalur dan URL baru di panel Jaringan.

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

Masalah Chromium #993366

String Agen Pengguna yang diperbarui

DevTools mendukung setelan string Agen Pengguna kustom melalui tab Network Conditions. Tujuan String Agen Pengguna memengaruhi header HTTP User-Agent yang terpasang ke resource jaringan, dan juga senilai navigator.userAgent.

String Agen Pengguna standar telah diupdate untuk mencerminkan versi browser modern.

Screenshot menu Agen Pengguna di tab Kondisi Jaringan.

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

Masalah Chromium #1029031

Pembaruan panel audit

UI konfigurasi baru

UI konfigurasi memiliki desain baru yang responsif, dan opsi konfigurasi throttling memiliki disederhanakan. Lihat Throttling Panel Audit untuk mengetahui informasi selengkapnya tentang UI throttling perubahan.

UI konfigurasi baru.

Update 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. Sekarang DevTools menggunakan cakupan per fungsi secara default.

Menu dropdown mode cakupan.

Sekarang cakupan harus dimulai dengan pemuatan ulang halaman

Mengalihkan cakupan kode tanpa memuat ulang halaman telah dihapus karena data cakupan tidak dapat diandalkan. Misalnya, sebuah fungsi dapat dilaporkan sebagai tidak digunakan jika eksekusinya sudah lama sekali 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, 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   Lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Beri 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.