Panduan ini akan memberi Anda gambaran umum yang komprehensif tentang penggunaan snippet dan fungsi pengaturan waktu di dalam Chrome Developer Tools. Snippet memungkinkan Anda membuat cuplikan kode yang dapat digunakan kembali yang dapat berguna saat memprogram dan menguji kode Anda. Kami juga menunjukkan kepada Anda bagaimana Anda dapat mengukur waktu eksekusi kode JavaScript untuk mengoptimalkan kinerja aplikasi Anda. Fitur-fitur tersebut dapat menjadi sangat penting untuk mendapatkan wawasan yang lebih baik tentang lingkungan pengembangan JavaScript Anda.
Pembelajaran utama
- Cuplikan adalah potongan kode yang dapat digunakan kembali yang disimpan di Alat Pengembang Chrome.
- Anda dapat membuat, mengedit, dan menjalankan snippet untuk mengotomatiskan tugas-tugas umum.
- Anda dapat menggunakan fungsi console.time() dan console.timeEnd() untuk mengukur waktu eksekusi cuplikan kode.
- Penanganan yang benar terhadap pemanggilan waktu dan waktu akhir sangat penting untuk mendapatkan nilai pengukuran yang benar.
Panduan langkah demi langkah
Membuat dan mengelola cuplikan
Pertama, mari kita lihat cara membuat dan mengelola cuplikan di Chrome Developer Tools.
Untuk mengakses cuplikan, buka Chrome Developer Tools, klik tab "Sumber" dan cari panel Cuplikan. Anda dapat mengakses panel cuplikan dengan menyesuaikan tampilan atau melalui menu.
Di sini Anda dapat membuat cuplikan baru. Klik "New Snippet" untuk membuat cuplikan baru. Anda akan diminta untuk memasukkan nama untuk cuplikan Anda; misalnya, beri nama "Test".
Segera setelah Anda menamai cuplikan tersebut, Anda dapat langsung mengeditnya. Di sini Anda dapat mengetikkan kode JavaScript yang diinginkan, yang kemudian akan dieksekusi ketika Anda menjalankan cuplikan tersebut.
Perubahan akan disimpan sementara hingga Anda menyimpannya dengan menekan Ctrl + S (atau Command + S pada Mac). Perhatikan bahwa cuplikan disimpan secara independen dari situs web yang dikunjungi, yang berarti Anda dapat menggunakan cuplikan di halaman mana pun.
Untuk menjalankan cuplikan, Anda cukup mengeklik ikon play atau menggunakan kombinasi tombol Ctrl + Enter (atau Command + Enter di Mac).
Ketika Anda menjalankan cuplikan, Anda akan menerima output secara langsung di area konsol Developer Tools.
Pengukuran waktu dengan console.time() dan console.timeEnd()
Setelah Anda berhasil membuat cuplikan, mari kita lihat bagaimana Anda dapat mengukur performa kode JavaScript menggunakan fungsi console.time() dan console.timeEnd().
Anda dapat memulai pengukuran waktu dengan menyisipkan console.time('Loop') di awal potongan kode yang ingin Anda ukur. Pastikan Anda menggunakan string yang sama pada console.timeEnd('Loop') di akhir kode yang dimaksud. Waktu di antara keduanya kemudian ditampilkan dalam milidetik.
Jika kedua string tidak cocok atau Anda lupa memanggil fungsi timeEnd, Anda akan menerima peringatan.
Contoh pengukuran waktu
Mari kita ambil contoh sederhana di mana Anda mengulang lebih dari 100.000 elemen dan menuliskannya ke sebuah larik.
Tetapkan console.time('Loop') sebelum perulangan dan console.timeEnd('Loop') setelah perulangan. Hal ini memungkinkan Anda untuk mengukur waktu yang dibutuhkan perulangan untuk dieksekusi.
Setelah Anda mencoba fungsi ini, Anda akan melihat bahwa pengukuran waktu membantu Anda untuk mengidentifikasi dan mengoptimalkan kemacetan.
Catatan penting tentang penggunaan
Perhatikan bahwa penggunaan console.time() dan console.timeEnd() tidak disarankan untuk lingkungan produksi. Fungsi-fungsi ini hanya boleh digunakan untuk pengujian, karena fungsi-fungsi ini mungkin didukung secara berbeda di lingkungan JavaScript yang berbeda.
Kesimpulan
Anda sekarang telah mempelajari dasar-dasar penggunaan snippet dan metode console.time() dan console.timeEnd() di Chrome Developer Tools. Fungsi-fungsi ini sangat berguna untuk bekerja lebih efisien dan memahami kinerja aplikasi Anda dengan lebih baik.
Meringkas
Sebagai rangkuman, menggunakan snippet dan pengaturan waktu di Chrome Developer Tools memberikan Anda alat yang berharga untuk meningkatkan efisiensi pengembangan dan mendapatkan wawasan yang lebih dalam tentang waktu eksekusi kode JavaScript Anda.
