Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 106)

Jecelyn Yeen

Kelompokkan file menurut Authored / Di-deploy di panel Sumber

Opsi Group files by Authored / Deployed sekarang ditampilkan di menu 3 titik. Sebelumnya, 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 kode tersebut dengan lebih cepat.

Kelompokkan file menurut Ditulis / Di-deploy

Bug Chromium: 1352488

Pelacakan tumpukan yang lebih baik

Pelacakan tumpukan tertaut untuk operasi asinkron

Ketika beberapa operasi dijadwalkan terjadi secara asinkron, pelacakan tumpukan di DevTools sekarang menceritakan “kisah lengkap” operasi tersebut. Sebelumnya, cerita ini hanya menceritakan sebagian dari cerita.

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

// application.component.ts

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

Sebelumnya, pelacakan tumpukan hanya menampilkan operasi waktu tunggu. Tindakan tersebut tidak menunjukkan “akar penyebab” operasi.

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

Pelacakan tumpukan tertaut untuk operasi asinkron

Di belakang layar, DevTools memperkenalkan fitur “Async Stack Tagging” yang baru. Anda dapat memberi tahu keseluruhan operasi dengan menautkan kedua bagian kode asinkron bersama-sama dengan metode console.createTask() yang baru. Lihat Proses debug modern di DevTools untuk mempelajari lebih lanjut.

Apakah kedengarannya rumit? Tidak sama sekali. Sering kali, framework yang Anda gunakan menangani eksekusi penjadwalan dan asinkron. Dalam hal ini, framework dapat memilih untuk menggunakan API, dan Anda tidak perlu mengkhawatirkannya. (mis. Angular menerapkan perubahan ini)

Bug Chromium: 1334585

Abaikan otomatis 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 dan klik tombol tambahkan. Perluas pesan error di Konsol. Stack trace hanya menampilkan kode Anda (misalnya app.component.ts button.component.ts). Klik Tampilkan frame lainnya untuk melihat stack trace lengkap.

Sebelumnya, stack trace menyertakan skrip pihak ketiga seperti zone.js dan core.mjs. Ini bukanlah kode sumber Anda, tetapi dihasilkan oleh pemaket (misalnya webpack) atau framework (misalnya Angular). Perlu waktu lebih lama untuk mengidentifikasi penyebab utama error.

Abaikan otomatis skrip pihak ketiga yang diketahui dalam pelacakan tumpukan

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

Secara opsional, jika memilih untuk selalu melihat pelacakan tumpukan penuh, Anda dapat menonaktifkan setelan ini melalui Setelan > Daftar abaikan > Tambahkan skrip pihak ketiga yang dikenal ke daftar yang diabaikan secara otomatis.

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

Bug Chromium: 1323199

Meningkatkan stack panggilan 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 pertambahan 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 bingkai secara default.

Meningkatkan stack panggilan selama proses debug

Bug Chromium: 1352488

Menyembunyikan sumber 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 Anda.

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 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 dan 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 Interactions baru di panel Performa untuk memvisualisasikan interaksi dan melacak potensi masalah responsivitas.

Misalnya, mulai rekaman performa di halaman demo ini. Klik kopi dan berhenti merekam. Dua interaksi ditampilkan di jalur Interaksi. Kedua interaksi memiliki ID yang sama, yang 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 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 Suara

Bug Chromium: 1351383

Sorotan lain-lain

Sebelumnya, ekstensi Perekam Suara 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 layout thrashing sebagai penyebab utama pergeseran tata letak di panel Performance Insights. (1343019)
Tampilkan jalur penting untuk font web LCP di panel Performance Insights. (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 tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan 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.
Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.