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 terkait pelengkapan otomatis dan pratinjau.

Evaluasi Bersemangat

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

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

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

Untuk mengaktifkan Evaluasi Bersemangat:

  1. Buka Konsol.
  2. Buka Setelan Konsol Tombol Setelan Konsol.
  3. Aktifkan kotak centang Eager evaluasi.

DevTools tidak segera mengevaluasi apakah ekspresi menyebabkan efek samping.

Petunjuk argumen

Saat Anda mengetik fungsi, sekarang Console akan menampilkan argumen yang diharapkan fungsi tersebut.

Petunjuk argumen di Konsol.

Gambar 2. Berbagai contoh petunjuk argumen di Konsol

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

Setelah menjalankan document.querySelector('p'), Konsol sekarang dapat menunjukkan 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 sekarang menyarankan 'await' pada UI pelengkapan otomatisnya.

Gambar 4. Konsol kini menyarankan await di UI pelengkapan otomatisnya

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

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

Audit yang lebih cepat dan lebih 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 operasi.

UI baru

Lighthouse 3.0 juga menghadirkan UI baru, berkat kolaborasi antara tim 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 dilengkapi dengan 4 audit baru:

  • First Contentful Paint (LCP)
  • 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. 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 untuk ditonton

"Tampilkan stempel waktu" dipindahkan ke setelan

Kotak centang Tampilkan stempel waktu yang sebelumnya ada di Setelan Konsol Tombol 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 tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan 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.
  • Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.

Yang Baru di DevTools

Daftar semua hal yang telah dibahas dalam seri What's New In DevTools.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 dibatalkan.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59