Yang Baru di DevTools (Chrome 68)

Kayce Basques

Yang baru di DevTools Chrome 68:

• Evaluasi Segera (Eager Evaluation). Saat Anda mengetik ekspresi, Konsol akan menampilkan pratinjau hasilnya.
• Petunjuk argumen. Saat Anda mengetik fungsi, Konsol akan menampilkan argumen yang diharapkan untuk fungsi tersebut.
• Penyelesaian otomatis fungsi. Setelah mengetik panggilan fungsi seperti document.querySelector('p'), Konsol akan menampilkan fungsi dan properti yang didukung oleh nilai yang ditampilkan.
• Kata kunci ES2017 di Konsol. Kata kunci seperti await kini tersedia di UI pelengkapan otomatis Konsol.
• Lighthouse 3.0 di panel Audits. Audit yang lebih cepat dan konsisten, UI baru, dan audit baru.
• Dukungan BigInt. Coba bilangan bulat presisi arbitrer baru JavaScript di Konsol.
• Menambahkan jalur properti ke panel Watch. Tambahkan properti dari panel Cakupan ke panel Watch.
• "Tampilkan stempel waktu" dipindahkan ke Setelan.

Baca terus, atau tonton versi video catatan rilis di bawah.

Konsol Pendukung

Chrome 68 dilengkapi dengan beberapa fitur Konsol baru yang terkait dengan pelengkapan otomatis dan pratinjau.

Evaluasi Segera

Saat Anda mengetik ekspresi di Konsol, Konsol kini dapat menampilkan pratinjau hasil ekspresi tersebut di bawah kursor Anda.

Gambar 1. Konsol mencetak hasil operasi sort() sebelum dieksekusi secara eksplisit

Untuk mengaktifkan Evaluasi Segera:

1. Buka Konsol.
2. Buka Setelan Konsol .
3. Aktifkan kotak centang Evaluasi langsung.

DevTools tidak mengevaluasi secara langsung jika ekspresi menyebabkan efek samping.

Petunjuk argumen

Saat Anda mengetik fungsi, Konsol kini menampilkan argumen yang diharapkan fungsi.

Gambar 2. Berbagai contoh petunjuk argumen di Konsol

Catatan:

• Tanda tanya sebelum argumen, seperti ?options, merepresentasikan argumen opsional.
• Elipsis sebelum argumen, seperti ...items, merepresentasikan spread.
• Beberapa fungsi, seperti CSS.supports(), menerima beberapa tanda tangan argumen.

Pelengkapan otomatis setelah eksekusi fungsi

Setelah mengaktifkan Evaluasi Langsung, Konsol kini juga menunjukkan properti dan fungsi yang tersedia setelah Anda mengetik fungsi.

Gambar 3. Screenshot atas menunjukkan perilaku lama, dan screenshot bawah menunjukkan perilaku baru yang mendukung pelengkapan otomatis fungsi

Kata kunci ES2017 di pelengkapan otomatis

Kata kunci ES2017, seperti await, kini tersedia di UI pelengkapan otomatis Konsol.

Gambar 4. Konsol kini menyarankan await di UI pelengkapan otomatisnya

Audit yang lebih cepat dan andal, UI baru, dan audit baru

Chrome 68 dilengkapi dengan Lighthouse 3.0. Bagian berikutnya adalah ringkasan beberapa perubahan terbesar. Lihat Pengumuman Lighthouse 3.0 untuk mengetahui cerita selengkapnya.

Audit yang lebih cepat dan andal

Lighthouse 3.0 memiliki mesin audit internal baru, yang diberi nama kode Lantern, yang menyelesaikan audit Anda lebih cepat, dan dengan lebih sedikit variasi antar-proses.

UI Baru

Lighthouse 3.0 juga menghadirkan UI baru, berkat kolaborasi antara tim Lighthouse dan Chrome UX (Riset & Desain).

Gambar 5. UI laporan baru di Lighthouse 3.0

Audit baru

Lighthouse 3.0 juga dilengkapi dengan 4 audit baru:

• First Contentful Paint
• robots.txt tidak valid
• Menggunakan format video untuk konten animasi
• Hindari beberapa perjalanan pulang pergi yang mahal ke asal mana pun

Dukungan BigInt

Chrome 68 mendukung primitif numerik baru yang disebut BigInt. BigInt memungkinkan Anda merepresentasikan bilangan bulat dengan presisi arbitrer. Coba di Konsol:

Gambar 6. Contoh BigInt di Konsol

Tambahkan jalur properti untuk ditonton

Saat dijeda pada titik henti sementara, klik kanan properti di panel Cakupan, lalu pilih Tambahkan jalur properti untuk dipantau guna menambahkan properti tersebut ke panel Pantau.

Gambar 7. Contoh Tambahkan jalur properti untuk ditonton

"Tampilkan stempel waktu" dipindahkan ke setelan

Kotak centang Tampilkan stempel waktu yang sebelumnya ada di Setelan Konsol telah dipindahkan ke Setelan.

Download 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.