Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 70)

Kayce Basques

Selamat datang kembali! Sudah sekitar 12 minggu sejak update terakhir kami, untuk Chrome 68. Kami melewati 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:

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.

Klik Create Live Expression . UI Ekspresi Live akan terbuka.

Gambar 1. UI Ekspresi Live
Ketik ekspresi yang ingin Anda pantau.

Gambar 2. Mengetik Date.now() ke UI Ekspresi Live
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 dievaluasi ke node DOM di Konsol, dan Eager Evaluation kini menyoroti node tersebut di area tampilan.

Catatan: Node yang ditandai hanya akan diperbarui saat Anda mengetik. Ini tidak diperbarui pada interval. Misalnya, jika Anda mengetik document.activeElement, yang melacak elemen yang sedang difokuskan, lalu menekan tab di halaman, DevTools akan tetap menyoroti node yang aktif saat Anda mengetik ekspresi tersebut.

Setelah mengetik document.activeElement di Konsol, node akan ditandai di area pandang.

Gambar 4. Karena ekspresi saat ini bernilai node, node tersebut akan disorot di 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 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 dipicu.

Rilis ini juga memperbaiki bug yang terkait dengan peta sumber. Beberapa pengguna TypeScript akan menginstruksikan DevTools untuk mengabaikan file TypeScript tertentu saat melihat-lihat kode. Sebagai gantinya, DevTools akan mengabaikan seluruh file JavaScript yang dipaketkan. Perbaikan ini juga mengatasi masalah yang menyebabkan panel Sumber biasanya berjalan lambat.

Mengaktifkan throttling jaringan dari Menu Perintah

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

Perintah throttling jaringan di 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.

UI Autocomplete

Gambar 7. UI Autocomplete

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

Jeda pada peristiwa AudioContext

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

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

Peristiwa AudioContext di panel Breakpoints Pemroses Peristiwa.

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.

UI ndb.

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 untuk menginstrumentasikan kode Anda dengan User Timing API.

Misalnya, Anda ingin mengukur durasi pengguna mengunjungi halaman beranda sebelum mengklik tombol pesan ajakan (CTA). Pertama, Anda harus menandai awal perjalanan dalam 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 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 dalam rekaman Performa Anda.

Bagian Waktu Pengguna.

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, panggil window.performance.mark() di awal dan akhir fungsi siklus proses Anda. 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.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.