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 menu 3 titik. Sebelumnya, tab ini ditampilkan langsung di panel navigasi.

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

Bug Chromium: 1352488

Stack trace yang ditingkatkan

Pelacakan tumpukan tertaut untuk operasi asinkron

Saat beberapa operasi dijadwalkan untuk terjadi secara asinkron, rekaman aktivitas di DevTools kini menceritakan “kisah lengkap” operasi tersebut. Sebelumnya, hanya sebagian cerita yang diceritakan.

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

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

Sebelumnya, pelacakan tumpukan hanya menampilkan operasi waktu tunggu. Tidak menunjukkan “akar masalah” operasi.

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

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

Apakah terdengar rumit? Bukan begitu. 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 pen-debug-an karena DevTools kini otomatis menambahkan skrip pihak ketiga yang diketahui ke daftar yang diabaikan.

Buka demo ini dan klik tombol penambahan. Perluas pesan error di Konsol. Perekaman aktivitas hanya menampilkan kode Anda (misalnya, app.component.ts button.component.ts). Klik Tampilkan frame lainnya untuk melihat perekaman aktivitas lengkap.

Sebelumnya, stack trace menyertakan skrip pihak ketiga seperti zone.js dan core.mjs. Ini bukan kode sumber Anda, melainkan dihasilkan oleh bundler (misalnya, webpack) atau framework (misalnya, Angular). Mengidentifikasi akar penyebab error membutuhkan waktu lebih lama.

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

Jika ingin selalu melihat rekaman aktivitas lengkap, Anda dapat menonaktifkan setelan melalui Setelan > Daftar yang diabaikan > Otomatis tambahkan skrip pihak ketiga yang diketahui ke daftar yang diabaikan.

Bug Chromium: 1323199

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

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 begitu, Anda hanya dapat berfokus pada kode.

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

Bug Chromium: 1352488

Menyembunyikan file dalam daftar yang diabaikan di Menu Perintah

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 ada dalam daftar abaikan, lalu klik menu 3 titik. Pilih Open file. Ketik “ton” untuk menelusuri komponen tombol. Sebelumnya, hasil menyertakan file dari node_modules, salah satu file node_modules bahkan muncul sebagai hasil pertama.

Bug Chromium: 1336604

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

Bug Chromium: 1347390

Perincian waktu LCP di panel Insight Performa

Panel Insight Performa kini menampilkan perincian waktu Largest Contentful Paint (LCP). Gunakan informasi pengaturan waktu ini untuk memahami dan mengidentifikasi peluang peningkatan performa LCP.

Bug Chromium: 1351735

Membuat nama default secara otomatis untuk rekaman di panel Perekam

Panel Perekam kini otomatis membuat nama untuk rekaman baru.

Bug Chromium: 1351383

Sorotan lain-lain

• Sebelumnya, ekstensi Perekam terkadang tidak muncul di panel Perekam. (1351416)
• Panel Styles kini menampilkan pemilih warna untuk properti stop-color elemen SVG <stop>. (1351096)
• Identifikasi skrip yang menyebabkan penyusunan tata letak berlebihan sebagai potensi penyebab utama pergeseran tata letak di panel Insight Performa. (1343019)
• Menampilkan jalur penting untuk font web 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 Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

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

• Kirimkan masukan dan permintaan fitur kepada kami di crbug.com.
• Laporkan masalah DevTools menggunakan more_vert Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet di @ChromeDevTools.
• Tinggalkan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.

Yang baru di DevTools

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