Yang Baru di DevTools (Chrome 106)

Jecelyn Yeen

Mengelompokkan file menurut status Ditulis / Di-deploy di panel Sumber

Kelompokkan file menurut status Ditulis / Di-deploy kini ditampilkan di bagian 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

Stack trace 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, pelacakan tumpukan hanya menampilkan operasi waktu tunggu habis. 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, framework yang akan menggunakan API, Anda tidak perlu mengkhawatirkannya. (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 penambahan. Luaskan pesan error di Konsol. Pelacakan tumpukan hanya menampilkan kode Anda (misalnya, app.component.ts button.component.ts). Klik Tampilkan lebih banyak frame untuk melihat pelacakan tumpukan lengkap.

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

Mengabaikan skrip pihak ketiga yang diketahui secara otomatis dalam pelacakan tumpukan

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

Stack panggilan yang ditingkatkan selama proses debug

Dengan setelan Otomatis tambahkan skrip pihak ketiga yang diketahui 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.

Stack panggilan yang ditingkatkan selama proses debug

Bug Chromium: 1352488

Menyembunyikan sumber yang tercantum dalam daftar abaikan 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 abaikan 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 dengan lebih cepat menggunakan 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 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. Klik kopi dan hentikan perekaman. 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 perincian pengaturan waktu Largest Contentful Paint (LCP). Gunakan informasi pengaturan waktu ini untuk memahami dan mengidentifikasi peluang untuk meningkatkan performa LCP.

Perincian pengaturan waktu LCP di panel Insight Performa

Bug Chromium: 1351735

Membuat nama default secara otomatis untuk rekaman di panel Perekam

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 pergeseran tata letak di panel Insight Performa. (1343019)
  • Menampilkan jalur penting untuk webfont LCP di panel Insight Performa. (1350390)

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 yang telah dibahas dalam seri Yang baru di DevTools.