Yang Baru di DevTools (Chrome 70)

Kayce Basques

Selamat datang kembali! Sudah sekitar 12 minggu sejak update terakhir kami, yang ditujukan untuk Chrome 68. Kami melewatkan Chrome 69 karena kami tidak memiliki cukup fitur baru atau perubahan UI untuk membuat postingan.

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

• Ekspresi Live di Konsol.
• Soroti node DOM selama Eager Evaluation.
• Pengoptimalan panel performa.
• Proses debug yang lebih andal.
• Aktifkan throttling jaringan dari Menu Perintah.
• Autocomplete Conditional Breakpoints.
• Berhenti pada peristiwa AudioContext.
• Men-debug aplikasi Node.js dengan ndb.
• Tips bonus: Ukur interaksi pengguna di dunia nyata dengan User Timing API.

Baca terus, atau tonton versi video dokumen ini:

Ekspresi Live di Konsol

Sematkan Ekspresi Live ke bagian atas Konsol jika Anda ingin memantau nilainya secara real time.

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

   

   Gambar 1. UI Ekspresi Live

2. Ketik ekspresi yang ingin Anda pantau.

   

   Gambar 2. Mengetik Date.now() ke UI Ekspresi Live

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

   

   Gambar 3. Ekspresi Live tersimpan

Nilai Ekspresi Live diperbarui setiap 250 milidetik.

Menandai node DOM selama Evaluasi Cepat

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

Gambar 4. Karena ekspresi saat ini dievaluasi menjadi node, node tersebut akan ditandai di area pandang

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 Hierarki DOM.
• $0.parentElement untuk menandai induk node yang saat ini dipilih.

Pengoptimalan panel performa

Saat membuat profil halaman besar, panel Performa sebelumnya memerlukan waktu puluhan detik untuk memproses dan memvisualisasikan data. Mengklik peristiwa untuk mempelajarinya lebih lanjut di tab Ringkasan 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 terpicu.

Versi ini juga memperbaiki bug yang terkait dengan peta sumber. Beberapa pengguna TypeScript akan menginstruksikan DevTools untuk mengabaikan file TypeScript tertentu saat melangkah melalui kode, dan sebagai gantinya DevTools akan mengabaikan seluruh file JavaScript yang dipaketkan. 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

Pelengkapan Otomatis Titik Henti Sementara Bersyarat

Gunakan UI Autocomplete untuk mengetik ekspresi Titik henti sementara Bersyarat dengan lebih cepat.

Gambar 7. UI Autocomplete

Tahukah Anda? UI Autocomplete dapat digunakan berkat CodeMirror, yang juga mendukung Konsol.

Jeda pada peristiwa AudioContext

Gunakan panel Titik Henti Pemeroses Peristiwa 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 proses debug biasa yang Anda dapatkan melalui DevTools, ndb juga menawarkan:

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

Gambar 9. UI ndb

Lihat ndb's README untuk mempelajari lebih lanjut.

Tips bonus: 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? Pertimbangkan untuk menginstrumentasikan 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 penangan 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 pengirimannya ke layanan analisis untuk mengumpulkan data gabungan anonim:

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

DevTools otomatis menandai pengukuran Pengaturan Waktu Pengguna di bagian Pengaturan Waktu Pengguna pada rekaman Performa Anda.

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 Anda. React melakukan hal ini dalam mode pengembangan.

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 yang mutakhir, dan membantu 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.

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

Yang baru di DevTools

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