Yang Baru di DevTools (Chrome 106)

Jecelyn Yeen

Mengelompokkan file menurut Authored / Deployed di panel Sources

Group files by Authored / Deployed sekarang ditampilkan di menu 3 titik. Sebelumnya, laporan ini ditampilkan langsung di panel navigasi.

Buka demo ini. Aktifkan setelan Kelompokkan file menurut Dibuat / Di-deploy untuk melihat kode sumber asli (Dibuat) terlebih dahulu dan membukanya dengan lebih cepat.

Mengelompokkan file menurut status Ditulis / Di-deploy

Bug Chromium: 1352488

Pelacakan tumpukan yang ditingkatkan

Pelacakan tumpukan tertaut untuk operasi asinkron

Saat beberapa operasi dijadwalkan untuk terjadi secara asinkron, pelacakan tumpukan di DevTools kini akan menceritakan “cerita lengkap” operasi. Sebelumnya, laporan ini hanya memberikan sebagian informasi.

Misalnya, buka demo ini dan klik tombol penambahan. Luaskan pesan error di Konsol. Dalam kode sumber, operasi ini mencakup operasi timeout asinkron.

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

Sebelumnya, stack trace hanya menampilkan operasi waktu tunggu. Laporan ini tidak menampilkan “akar masalah” operasi.

Dengan perubahan terbaru, DevTools kini menampilkan operasi yang berasal dari peristiwa onClick di komponen tombol, lalu fungsi increment, diikuti dengan operasi waktu tunggu.

Pelacakan tumpukan tertaut untuk operasi asinkron

Di balik layar, DevTools memperkenalkan fitur “Pemberian Tag Stack Asinkron” baru. Anda dapat menceritakan seluruh kisah operasi dengan menautkan kedua bagian kode asinkron bersama dengan metode console.createTask() baru. Lihat Proses debug modern di DevTools untuk mempelajari lebih lanjut.

Kedengarannya rumit? Tidak sama sekali. Sebagian besar waktu, framework yang Anda gunakan menangani penjadwalan dan eksekusi asinkron. Dalam hal ini, terserah framework untuk menggunakan API, Anda tidak perlu khawatir. (misalnya, Angular menerapkan perubahan ini)

Bug Chromium: 1334585

Mengabaikan skrip pihak ketiga yang diketahui secara otomatis

Identifikasi masalah dalam kode Anda dengan lebih cepat selama proses debug karena DevTools kini otomatis menambahkan skrip pihak ketiga yang diketahui ke daftar yang diabaikan.

Buka demo ini dan klik tombol increment. Luaskan pesan error di Konsol. Stack trace hanya menampilkan kode Anda (mis. app.component.ts button.component.ts). Klik Show more frames untuk melihat stack trace lengkap.

Sebelumnya, pelacakan tumpukan menyertakan skrip pihak ketiga seperti zone.js dan core.mjs. Kode ini bukan kode sumber Anda, melainkan dihasilkan oleh pemaket (misalnya webpack) atau framework (misalnya Angular). Diperlukan waktu lebih lama untuk mengidentifikasi akar penyebab error.

Otomatis abaikan skrip pihak ketiga yang diketahui dalam stack trace

Di balik layar, DevTools mengabaikan skrip pihak ketiga berdasarkan properti x_google_ignoreList baru di peta sumber. Framework dan bundler harus memberikan informasi ini. Lihat Studi Kasus: Proses Debug Angular yang Lebih Baik dengan DevTools.

Atau, jika Anda memilih untuk selalu melihat pelacakan tumpukan lengkap, Anda dapat menonaktifkan setelan ini melalui Setelan > Daftar yang diabaikan > Otomatis tambahkan skrip pihak ketiga yang diketahui ke daftar yang diabaikan.

Setelan untuk otomatis menambahkan skrip pihak ketiga yang diketahui ke daftar yang diabaikan

Bug Chromium: 1323199

Meningkatkan stack panggilan selama proses debug

Dengan setelan Tambahkan skrip pihak ketiga yang diketahui secara otomatis ke daftar yang diabaikan, stack panggilan kini hanya menampilkan frame yang relevan dengan kode Anda.

Buka demo ini dan tetapkan titik henti sementara pada fungsi increment() di app.component.ts. Klik tombol increment di halaman untuk memicu titik henti sementara. Stack panggilan hanya menampilkan frame dari kode Anda (misalnya, app.component.ts dan button.component.ts).

Untuk melihat semua frame, aktifkan Tampilkan frame dalam daftar yang diabaikan. Sebelumnya, DevTools menampilkan semua frame secara default.

Meningkatkan stack panggilan selama proses debug

Bug Chromium: 1352488

Menyembunyikan sumber yang tercantum dalam daftar yang diabaikan di panel Sumber

Aktifkan sembunyikan sumber yang tercantum dalam daftar abaikan untuk menyembunyikan file yang tidak relevan di panel Navigasi. Dengan cara ini, Anda dapat berfokus hanya pada kode.

Buka demo ini. Di panel Sumber. node_modules dan webpack adalah skrip pihak ketiga. Klik menu 3 titik dan pilih sembunyikan sumber yang tercantum dalam daftar yang diabaikan untuk menyembunyikannya dari panel.

Menyembunyikan sumber yang tercantum dalam daftar abaikan di panel Sumber

Bug Chromium: 1352488

Dengan setelan sembunyikan sumber yang diabaikan, Anda dapat menemukan file lebih cepat dengan Menu Perintah. Sebelumnya, penelusuran file di Menu Perintah menampilkan file pihak ketiga yang mungkin tidak relevan bagi Anda.

Misalnya, aktifkan setelan sembunyikan sumber yang dihapus dari daftar yang diabaikan, lalu klik menu 3 titik. Pilih Open file. Ketik “ton” untuk menelusuri komponen tombol. Sebelumnya, hasilnya menyertakan file dari node_modules, salah satu file node_modules bahkan muncul sebagai hasil pertama.

Menyembunyikan file yang tercantum dalam daftar yang diabaikan di Menu Perintah

Bug Chromium: 1336604

Jalur Interaksi baru di panel Performa

Gunakan jalur Interaksi baru di panel Performa untuk memvisualisasikan interaksi dan melacak potensi masalah responsivitas.

Misalnya, mulai perekaman performa di halaman demo ini. Mengklik kopi dan berhenti merekam. Dua interaksi ditampilkan di jalur Interaksi. Kedua interaksi memiliki ID yang sama, yang menunjukkan bahwa interaksi dipicu dari interaksi pengguna yang sama.

Jalur interaksi di panel Performa

Bug Chromium: 1347390

Perincian pengaturan waktu LCP di panel Insight Performa

Panel Performance Insights kini menampilkan pengelompokan waktu dari Largest Contentful Paint (LCP). Gunakan informasi pengaturan waktu ini untuk memahami dan mengidentifikasi peluang untuk meningkatkan performa LCP.

Perincian waktu LCP di panel Insight Performa

Bug Chromium: 1351735

Membuat nama default secara otomatis untuk rekaman di panel Perekam Suara

Panel Perekam kini otomatis membuat nama untuk rekaman baru.

Nama default untuk rekaman di panel Perekam

Bug Chromium: 1351383

Sorotan lainnya

  • Sebelumnya, ekstensi Perekam tidak muncul di panel Perekam dari waktu ke waktu. (1351416)
  • Panel Styles kini menampilkan pemilih warna untuk properti stop-color elemen SVG <stop>. (1351096)
  • Identifikasi skrip yang menyebabkan thrashing tata letak sebagai potensi penyebab utama perubahan tata letak di panel Insight Performa. (1343019)
  • Menampilkan jalur penting untuk webfont LCP di panel Insight Performa. (1350390)

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