Halaman ini diterjemahkan oleh Cloud Translation API.

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, fitur ini ditampilkan langsung di panel navigasi.

Buka demo ini. Aktifkan setelan Group files by Authored / Deployed untuk melihat kode sumber asli (Ditulis) terlebih dahulu dan buka file tersebut lebih cepat.

Kelompokkan file menurut status Ditulis / Di-deploy

Bug Chromium: 1352488

Pelacakan tumpukan yang ditingkatkan

Pelacakan tumpukan tertaut untuk operasi asinkron

Jika beberapa operasi dijadwalkan agar terjadi secara asinkron, stack trace di DevTools kini akan menceritakan “kisah lengkap” operasi tersebut. Sebelumnya, bagian ini hanya menceritakan sebagian dari ceritanya.

Misalnya, buka demo ini, lalu klik tombol tambahkan. Luaskan pesan error di Konsol. Dalam kode sumber kami, operasi tersebut menyertakan operasi timeout asinkron.

// application.component.ts

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

Sebelumnya, stack trace hanya menampilkan operasi waktu tunggu. Laporan itu tidak menunjukkan "akar penyebab" 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 baru “Pemberian Tag Stack Asinkron”. Anda dapat mengetahui keseluruhan operasi ini dengan menautkan kedua bagian kode asinkron bersama dengan metode console.createTask() yang baru. Lihat Proses debug modern di DevTools untuk mempelajari lebih lanjut.

Apakah kedengarannya rumit? Tidak sama sekali. Biasanya, framework yang Anda gunakan akan 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

Otomatis abaikan skrip pihak ketiga yang diketahui

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

Buka demo ini lalu klik tombol tambahkan. 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, stack trace 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). Perlu waktu yang lebih lama untuk mengidentifikasi penyebab utama 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 pemaket harus menyediakan informasi ini. Lihat Studi Kasus: Proses Debug Angular yang Lebih Baik dengan DevTools.

Secara opsional, jika memilih untuk selalu melihat stack trace lengkap, Anda dapat menonaktifkan setelan melalui Setelan > Abaikan daftar > Tambahkan skrip pihak ketiga yang diketahui secara otomatis ke daftar abaikan.

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 penambahan 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 yang diabaikan untuk menyembunyikan file yang tidak relevan di panel Navigasi. Dengan cara ini, Anda hanya dapat berfokus pada kode.

Buka demo ini. Di panel Sources. 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 yang diabaikan di panel Sumber

Bug Chromium: 1352488

Menyembunyikan file yang tercantum dalam daftar yang diabaikan di Menu Perintah

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

Misalnya, aktifkan setelan sembunyikan sumber yang tercantum dalam daftar yang diabaikan, lalu klik menu 3 titik. Pilih Open file. Ketik “ton” untuk menelusuri komponen tombol. Sebelumnya, hasilnya menyertakan file dari node_modules, bahkan salah satu file node_modules 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, menunjukkan interaksi dipicu dari interaksi pengguna yang sama.

Pelacakan interaksi di panel Performa

Bug Chromium: 1347390

Perincian 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 guna 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 akan otomatis membuat nama untuk rekaman baru.

Nama default untuk rekaman di panel Perekam Suara

Bug Chromium: 1351383

Sorotan lain-lain

Sebelumnya, Ekstensi Perekam Suara tidak akan muncul di panel Perekam dari waktu ke waktu. (1351416)
Panel Gaya kini menampilkan pemilih warna untuk properti stop-color elemen SVG <stop>. (1351096)
Identifikasi skrip yang menyebabkan layout thrashing sebagai potensi penyebab utama pergeseran tata letak di panel Performance Insights. (1343019)
Tampilkan 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, 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 > Bantuan > Laporkan masalah DevTools di DevTools.
Tweet di @ChromeDevTools.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.