Yang Baru di DevTools (Chrome 68)

Baru menggunakan DevTools di Chrome 68:

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.

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

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

Untuk mengaktifkan Evaluasi Bersemangat:

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

DevTools tidak ingin mengevaluasi apakah ekspresi menyebabkan efek samping.

Petunjuk argumen

Saat Anda mengetik fungsi, Console 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, Konsol kini juga menampilkan properti dan fungsi mana yang yang tersedia setelah Anda mengetikkan sebuah {i>function<i}.

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

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.

Konsol kini menyarankan &#39;await&#39; 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 antar-operasi.

UI baru

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

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
  • Menghindari 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. 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 Cakupan, 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

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

Kotak centang Tampilkan stempel waktu sebelumnya di Setelan Konsol Tombol Console Settings 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   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.