Yang Baru di DevTools (Chrome 68)

Kayce Basques

Baru menggunakan DevTools di Chrome 68:

• Evaluasi Bersemangat. Saat Anda mengetik ekspresi, Konsol akan melihat pratinjau hasilnya.
• Petunjuk argumen. Saat Anda mengetik fungsi, Console akan menampilkan argumen yang diharapkan untuk perintah tersebut .
• Pelengkapan otomatis fungsi. Setelah mengetik panggilan fungsi seperti document.querySelector('p'), Konsol menunjukkan fungsi dan properti yang didukung nilai yang ditampilkan.
• Kata kunci ES2017 di Konsol. Kata kunci seperti await kini tersedia di Konsol UI pelengkapan otomatis.
• Lighthouse 3.0 di panel Audit. Audit yang lebih cepat, lebih konsisten, UI baru, dan audit baru.
• Dukungan BigInt. Coba integer presisi arbitrer baru JavaScript di Console.
• Menambahkan jalur properti ke panel Watch. Menambahkan properti dari panel Scope ke Watch Google Analytics.
• "Tampilkan stempel waktu" dipindahkan ke Setelan.

Lanjutkan membaca, atau tonton catatan rilis versi video, di bawah.

Konsol Asistif

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

Evaluasi Bersemangat

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

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

Untuk mengaktifkan Evaluasi Bersemangat:

1. Buka Konsol.
2. Buka Setelan Konsol .
3. Aktifkan kotak centang Eager assessment.

DevTools tidak ingin mengevaluasi apakah ekspresi menyebabkan efek samping.

Petunjuk argumen

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

Gambar 2. Berbagai contoh petunjuk argumen di Console

Catatan:

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

Pelengkapan otomatis setelah eksekusi fungsi

Setelah mengaktifkan Eager Evaluation, Konsol kini juga menunjukkan properti dan fungsi mana yang yang tersedia setelah Anda mengetikkan sebuah {i>function<i}.

Gambar 3. Screenshot atas mewakili perilaku lama, dan screenshot bawah mewakili 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 sekarang menyarankan await di UI pelengkapan otomatisnya

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

Chrome 68 diluncurkan dengan Lighthouse 3.0. Bagian selanjutnya adalah rangkuman beberapa perubahan terbesar. Lihat Mengumumkan Lighthouse 3.0 untuk mengetahui cerita lengkapnya.

Audit yang lebih cepat dan andal

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

UI baru

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

Gambar 5. UI laporan baru di Lighthouse 3.0

Audit baru

Lighthouse 3.0 juga dikirimkan dengan 4 audit baru:

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

Dukungan BigInt

Chrome 68 mendukung primitif numerik baru yang disebut BigInt. BigInt memungkinkan Anda merepresentasikan bilangan bulat dengan presisi arbitrer. Cobalah 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 Add property path to watch untuk menambahkan properti tersebut ke panel Watch.

Gambar 7. Contoh Tambahkan jalur properti yang akan ditonton

"Show timestamp" (Tampilkan stempel waktu) dipindahkan ke setelan

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

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.

Yang baru di DevTools

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