Halaman ini diterjemahkan oleh Cloud Translation API.

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 fungsi tersebut.
Pelengkapan 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 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. Tambahkan properti dari panel Scope ke panel Watch.
"Tampilkan stempel waktu" dipindahkan ke Setelan.

Catatan: Periksa versi Chrome yang Anda jalankan di chrome://version. Jika Anda menjalankan versi sebelumnya, fitur ini tidak akan ada. Jika Anda menjalankan versi yang lebih baru, fitur ini mungkin telah berubah. Chrome mengupdate otomatis ke versi utama baru sekitar setiap 6 minggu.

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

Console sedang mencetak hasil operasi sort() sebelum dieksekusi secara eksplisit.

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

Untuk mengaktifkan Evaluasi Bersemangat:

Buka Konsol.
Buka Console Settings .
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.

Petunjuk argumen di Console.

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, Console kini juga akan menampilkan properti dan fungsi yang tersedia setelah Anda mengetik fungsi.

Setelah menjalankan document.querySelector('p'), Konsol kini dapat menampilkan properti dan fungsi yang tersedia untuk elemen tersebut.

Gambar 3. Screenshot atas mewakili perilaku lama, dan screenshot bawah menampilkan 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.

Konsol kini menyarankan 'await' di UI pelengkapan otomatisnya.

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 di antara proses.

UI baru

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

UI laporan baru di Lighthouse 3.0.

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:

Contoh BigInt di Konsol.

Gambar 6. Contoh BigInt di Konsol

Tambahkan jalur properti untuk ditonton

Saat dijeda pada titik henti sementara, klik kanan properti di panel Scope, lalu pilih Add property path to watch untuk menambahkan properti tersebut ke panel Watch.

Contoh Tambahkan jalur properti yang akan dipantau.

Gambar 7. Contoh Tambahkan jalur properti yang akan ditonton

"Tampilkan stempel waktu" dipindahkan ke setelan

Kotak centang Tampilkan stempel waktu yang 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.