Yang Baru di DevTools (Chrome 70)

Kayce Basques

Selamat datang kembali! Sudah sekitar 12 minggu sejak update terakhir kami, yaitu untuk Chrome 68. Kami melewati Chrome 69 karena kami tidak memiliki cukup banyak fitur baru atau perubahan UI untuk membenarkan postingan.

Fitur baru dan perubahan besar yang akan hadir di DevTools pada Chrome 70 meliputi:

• Ekspresi Langsung di Konsol.
• Menandai node DOM selama Evaluasi Langsung.
• Pengoptimalan panel performa.
• Proses debug yang lebih andal.
• Aktifkan pembatasan jaringan dari Menu Perintah.
• Titik Break Bersyarat Pelengkapan Otomatis.
• Istirahat pada acara AudioContext.
• Men-debug aplikasi Node.js dengan ndb.
• Tips tambahan: Ukur interaksi pengguna di dunia nyata dengan User Timing API.

Lanjutkan membaca, atau tonton versi video dari dokumen ini:

Ekspresi Langsung di Konsol

Sematkan Ekspresi Langsung ke bagian atas Konsol saat Anda ingin memantau nilainya secara real-time.

1. Klik Buat Ekspresi Live . UI Live Expression akan terbuka.

   

   Gambar 1. UI Ekspresi Langsung

2. Ketik ekspresi yang ingin Anda pantau.

   

   Gambar 2. Mengetik Date.now() ke dalam UI Ekspresi Langsung

3. Klik di luar UI Ekspresi Langsung untuk menyimpan ekspresi Anda.

   

   Gambar 3. Ekspresi Live yang disimpan

Nilai Ekspresi Langsung diperbarui setiap 250 milidetik.

Menandai node DOM selama Evaluasi Langsung

Ketik ekspresi yang dievaluasi ke node DOM di Konsol dan Evaluasi Langsung kini menandai node tersebut di area tampilan.

Gambar 4. Karena ekspresi saat ini dievaluasi ke node, node tersebut akan ditandai di area tampilan

Berikut beberapa ekspresi yang mungkin berguna bagi Anda:

• document.activeElement untuk menandai node yang saat ini memiliki fokus.
• document.querySelector(s) untuk menandai node arbitrer, dengan s adalah pemilih CSS. Hal ini sama dengan mengarahkan kursor ke node di Hierarki DOM.
• $0 untuk menandai node apa pun yang saat ini dipilih di DOM Tree.
• $0.parentElement untuk menandai induk dari node yang saat ini dipilih.

Pengoptimalan panel performa

Saat memprofilkan halaman besar, panel Performa sebelumnya memerlukan waktu puluhan detik untuk memproses dan memvisualisasikan data. Mengklik peristiwa untuk mempelajari lebih lanjut di tab Summary juga terkadang memerlukan waktu beberapa detik untuk dimuat. Pemrosesan dan visualisasi lebih cepat di Chrome 70.

Gambar 5. Memproses dan memuat data Performa

Proses debug yang lebih andal

Chrome 70 memperbaiki beberapa bug yang menyebabkan titik henti sementara menghilang atau tidak dipicu.

Selain itu, versi ini juga memperbaiki bug terkait peta sumber. Beberapa pengguna TypeScript akan menginstruksikan DevTools untuk mengabaikan file TypeScript tertentu saat menelusuri kode, dan DevTools akan mengabaikan seluruh file JavaScript yang di-bundle. Perbaikan ini juga mengatasi masalah yang menyebabkan panel Sumber umumnya berjalan lambat.

Mengaktifkan pembatasan jaringan dari Menu Perintah

Anda kini dapat menyetel pembatasan jaringan ke 3G cepat atau 3G lambat dari Menu Perintah.

Gambar 6. Perintah throttling jaringan di Menu Perintah

Titik Henti Sementara Bersyarat Pelengkapan Otomatis

Gunakan UI Pelengkapan Otomatis untuk mengetik ekspresi Titik Break Kondisional dengan lebih cepat.

Gambar 7. UI Pelengkapan Otomatis

Tahukah Anda? UI Pelengkapan Otomatis dimungkinkan berkat CodeMirror, yang juga mendukung Konsol.

Menghentikan eksekusi pada peristiwa AudioContext

Gunakan panel Event Listener Breakpoints untuk menjeda di baris pertama pengendali peristiwa siklus proses AudioContext.

AudioContext adalah bagian dari Web Audio API, yang dapat Anda gunakan untuk memproses dan menyintesis audio.

Gambar 8. Peristiwa AudioContext di panel Titik Henti Sementara Pemroses Peristiwa

Men-debug aplikasi Node.js dengan ndb

ndb adalah debugger baru untuk aplikasi Node.js. Selain fitur debug biasa yang Anda dapatkan melalui DevTools, ndb juga menawarkan:

• Mendeteksi dan melampirkan ke proses turunan.
• Penempatan titik henti sebelum modul diperlukan.
• Mengedit file dalam UI DevTools.
• Mengabaikan semua skrip di luar direktori kerja saat ini secara default.

Gambar 9. UI ndb

Lihat README NDB untuk mempelajari lebih lanjut.

Tips tambahan: Mengukur interaksi pengguna di dunia nyata dengan User Timing API

Ingin mengukur berapa lama waktu yang dibutuhkan pengguna sebenarnya untuk menyelesaikan perjalanan penting di halaman Anda? Sebaiknya lengkapi kode Anda dengan User Timing API.

Misalnya, Anda ingin mengukur berapa lama pengguna menghabiskan waktu di halaman beranda sebelum mengklik tombol pesan ajakan (CTA). Pertama, Anda akan menandai awal perjalanan di pengendali peristiwa yang terkait dengan peristiwa pemuatan halaman, seperti DOMContentLoaded:

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

Kemudian, Anda akan menandai akhir perjalanan dan menghitung durasinya saat tombol diklik:

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

Anda juga dapat mengekstrak pengukuran, sehingga memudahkan pengiriman ke layanan analisis untuk mengumpulkan data gabungan anonim:

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

DevTools otomatis menandai pengukuran Waktu Pengguna di bagian Waktu Pengguna dalam rekaman Performa.

Gambar 10. Bagian Waktu Pengguna

Hal ini juga berguna saat men-debug atau mengoptimalkan kode. Misalnya, jika Anda ingin mengoptimalkan fase tertentu dalam siklus proses, panggil window.performance.mark() di awal dan akhir fungsi siklus proses. React melakukannya dalam mode pengembangan.

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.