Yang Baru di DevTools (Chrome 70)

Kayce Basques

Selamat datang kembali! Sudah sekitar 12 minggu sejak update terakhir kami, untuk Chrome 68. Kita lewati Chrome 69 karena kami tidak memiliki cukup fitur baru atau perubahan UI untuk menjamin postingan.

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

• Ekspresi Langsung di Konsol.
• Soroti node DOM selama Eager Evaluation.
• Pengoptimalan panel performa.
• Proses debug yang lebih andal.
• Aktifkan throttling jaringan dari Menu Perintah.
• Titik henti sementara Bersyarat Pelengkapan Otomatis.
• Jeda 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 Langsung di Konsol

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

1. Klik Buat Ekspresi Live . Live UI ekspresi 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 yang tersimpan

Nilai Ekspresi Live diperbarui setiap 250 milidetik.

Menyoroti node DOM selama Eager Evaluation

Ketik ekspresi yang akan dievaluasi ke node DOM di Konsol dan Eager Evaluation sekarang menyorot simpul itu di area pandang.

Gambar 4. Karena ekspresi saat ini bernilai sebuah simpul, simpul itu disorot di dalam area pandang

Berikut adalah 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 sebagai pemilih CSS. Ini sama dengan mengarahkan kursor ke node dalam DOM Tree.
• $0 untuk menandai node apa pun yang saat ini dipilih di Pohon DOM.
• $0.parentElement untuk menandai induk dari node yang saat ini dipilih.

Pengoptimalan panel performa

Saat membuat profil halaman besar, panel {i>Performance<i} sebelumnya membutuhkan waktu puluhan detik untuk memvisualisasikan data. Mengklik peristiwa untuk mempelajarinya lebih lanjut di tab Ringkasan terkadang juga perlu 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.

Rilis ini juga memperbaiki bug yang terkait dengan peta sumber. Beberapa pengguna TypeScript 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 agar berjalan lambat.

Mengaktifkan throttling jaringan dari Menu Perintah

Sekarang, Anda dapat menyetel throttling jaringan ke 3G cepat atau 3G lambat dari Menu Perintah.

Gambar 6. Perintah throttling jaringan di Menu Perintah

Titik henti sementara Bersyarat Autocomplete

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

Gambar 7. UI Autocomplete

Tahukah Anda? UI Autocomplete tersedia berkat CodeMirror, yang juga mendukung Konsol Play.

Jeda pada peristiwa AudioContext

Gunakan panel Titik henti sementara Pemroses Peristiwa untuk berhenti sejenak di baris pertama AudioContext pengendali peristiwa.

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 waktu yang dibutuhkan pengguna sungguhan untuk menyelesaikan perjalanan penting di halaman Anda? Pertimbangkan melengkapi kode Anda dengan User Timing API.

Misalnya, Anda ingin mengukur durasi pengguna mengakses halaman beranda sebelum mengklik tombol pesan ajakan (CTA). Pertama, Anda akan menandai awal perjalanan dalam pengendali 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 mudah mengirimkannya ke layanan analisis Anda untuk mengumpulkan data gabungan anonim:

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

DevTools otomatis menandai pengukuran Waktu Pengguna di bagian Waktu Pengguna Rekaman performa.

Gambar 10. Bagian Waktu Pengguna

Hal ini juga berguna saat melakukan debug atau mengoptimalkan kode. Misalnya, jika Anda ingin mengoptimalkan fase tertentu dalam siklus proses Anda, panggil window.performance.mark() di awal dan akhir siklus proses siklus proses. React melakukan hal ini 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, 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.
• Beri komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.

Yang baru di DevTools

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