Semua yang Perlu Anda Ketahui Tentang Konsol Pengembang

Profesional yang baik tahu alat mereka. Salah satu alat utama yang dimiliki pengembang WordPress adalah konsol pengembang JavaScript yang disertakan dalam peramban kami. Dalam posting ini, kita akan melihat semua yang perlu Anda ketahui tentang konsol pengembang browser, bersama dengan beberapa trik dan keingintahuan yang mungkin belum Anda ketahui.

Cara Mengakses Konsol Pengembang

Hal pertama yang pertama: mari kita lihat bagaimana Anda dapat membuka konsol pengembang browser Anda. Jika Anda pengguna Firefox, cukup klik menu (pojok kanan atas) dan cari opsi Pengembang Web , seperti yang Anda lihat di bawah ini:

Kemudian, pilih Konsol Web :

dan konsol akan muncul di browser Anda, seperti yang Anda lihat di tangkapan layar berikut. Ingatlah bahwa dimungkinkan untuk mengonfigurasi di mana Anda ingin panel muncul dengan tepat. Anda bahkan dapat mengaturnya agar muncul di jendela terpisah (yang cukup berguna jika Anda menggunakan banyak monitor).

Sebaliknya, jika Anda adalah pengguna Chrome, prosedurnya sangat mirip. Cukup akses menunya, pilih More Tools lalu Developer Tools :

Cara Menggunakan Konsol Pengembang

Konsol JavaScript browser kami sangat membantu untuk men-debug kode kami, melihat apa yang dicatat skrip kami, dan menjalankan perintah kecil dan melihat efeknya di web secara real-time. Sebagai pengembang plugin untuk WordPress, utilitas utama yang dimiliki konsol untuk saya jelas adalah debug, jadi mari kita lihat secara detail apa yang ditawarkannya secara tepat.

#1 Level Log Berbeda

Alasan pertama mengapa pengembang biasanya membuka konsol JavaScript adalah untuk men-debug kode mereka. Saat terjadi kesalahan atau ada sesuatu yang gagal, Anda mungkin akan menemukan beberapa info tentangnya di konsol. Anda bahkan dapat meluncurkan pesan, peringatan, atau kesalahan informasi Anda sendiri kapan pun Anda mau!

Pada tangkapan layar sebelumnya, misalnya, kita melihat bahwa objek console (objek global yang tujuannya membantu kami men-debug kode) memiliki metode berbeda untuk menulis pesan di konsol:

• debug dan log menunjukkan pesan biasa.
• info menunjukkan pesan informasi. Di Firefox mereka menampilkan ikon "info" di sebelah pesan.
• warn menunjukkan peringatan, biasanya menunjukkan masalah atau sesuatu yang kurang tepat. Biasanya disorot dengan warna kuning dan dengan ikon peringatan.
• error biasanya dicadangkan untuk kesalahan paling parah (yaitu, hal-hal yang benar-benar gagal). Itu ditampilkan dalam warna merah dan juga mencetak jejak tumpukan (yaitu, fungsi apa yang menghasilkan kesalahan dan semua pemanggilnya).

Keuntungan menggunakan tingkat log yang berbeda adalah kita dapat memilih setiap saat pesan apa yang ingin kita tampilkan. Misalnya, pada tangkapan layar berikut kami telah menonaktifkan pesan Info dan Debug :

#2 Memantau Waktu Eksekusi

Di Agile, Anda akan sering mendengar ini: “buatlah berhasil, buatlah dengan baik, buatlah dengan cepat.” Setelah menuliskan beberapa kode “agar berhasil”, bukan tidak mungkin hasilnya lambat dan tidak efisien. Ketika ini terjadi, penting untuk mengidentifikasi di mana hambatan dan mengatasinya.

Meskipun ada alat seperti profiler untuk menemukan pelakunya dan memahami persis apa yang terjadi di balik kap mesin dengan sangat rinci, terkadang kita menginginkan solusi yang "cepat dan kotor". Artinya, kami hanya ingin mengidentifikasi fungsi paling lambat dalam kode kami… dan pengatur waktu sederhana sangat bagus untuk tugas ini!

Jika Anda ingin mengetahui berapa lama waktu yang diperlukan untuk menjalankan sepotong kode, mulai penghitung waktu di awal kode ( console.time ) dan hentikan ( console.timeEnd ) ketika kode Anda selesai:

 console.time( 'Timer' ); // code we want to monitor... console.timeEnd( 'Timer' );

Saat kode mencapai timeEnd , Anda akan melihat waktu yang diperlukan untuk menjalankan:

 Timer: 655ms - timer ended

Perhatikan bahwa ketika kita memulai dan menghentikan timer, kita memberinya nama (dalam contoh saya, "Timer"). Ini karena kita dapat membuat penghitung sebanyak yang kita inginkan, masing-masing dengan namanya sendiri, dan menjalankan semuanya sekaligus.

#3 Penghitung Otomatis

Jika Anda tertarik untuk mengontrol jumlah eksekusi fungsi apa pun dalam kode Anda atau mencatat berapa kali loop berjalan, gunakan console.count . Setiap kali fungsi dijalankan, Anda akan mendapatkan log baru di konsol Anda dengan nilai penghitung saat ini:

#4 Cara Memformat Log Anda

Log ada di sini untuk membantu kami memahami apa yang terjadi dengan kode kami. Tapi itu hanya mungkin jika kita menulis log yang nantinya bisa kita pahami…

String Teks

Di awal posting ini, saya berbicara secara singkat tentang semua metode log yang dimiliki console . Contoh yang saya bagikan mencetak beberapa teks biasa. Yaitu, pernyataan ini:

 console.log( 'Hello world!' );

dicetak teks ini:

 Hello world!

Bagaimana jika kita ingin mencetak objek saja? Nah, ini:

 obj = { x: 1, y: { a: 'hola' } }; console.log( obj );

menjadi ini:

Tetapi bagaimana jika kita ingin mencatat banyak hal? Apakah kita harus menggunakan beberapa panggilan ke console.log ? Yah, jawabannya tidak, itu tidak perlu. Kami dapat mencatat semua yang kami inginkan dengan satu panggilan:

Mengelompokkan Log…

Ketika kami mulai memiliki banyak log dalam kode kami (seperti, misalnya, di sini):

hasilnya bisa sedikit membingungkan karena semua log digabungkan menjadi satu aliran teks:

 Retrieving x... Retrieving y... Compute result using 2 and 3 Getting max value Result is 6

Untungnya, objek console menawarkan beberapa metode untuk memecahkan masalah ini: group dan groupEnd . Dengan mereka, kami dapat mengelompokkan pesan log kami. Cukup buat grup (misalnya, satu grup per fungsi):

dan mereka akan muncul seperti ini:

Tabel

Saat kami bekerja dengan pengumpulan data, tidak selalu mudah untuk memvisualisasikannya. Misalnya, bayangkan kita memiliki daftar item seperti berikut:

 data = [ { id: 1, name: 'David', surname: 'Aguilera' }, { id: 2, name: 'Ruth', surname: 'Raventos' }, { id: 3, name: 'Antonio', surname: 'Villegas' }, ];

Jika kita console.log mereka, inilah yang kita dapatkan:

yang kurang lebih OK, sampai kita memiliki lebih banyak objek dengan lebih banyak bidang masing-masing. Saat menghadapi jenis struktur data ini, saya sarankan Anda menggunakan console.table untuk mencatatnya:

#5 Cara Benar Menampilkan Tipe Kompleks (Objek dan Array)

Akhirnya, saya ingin mengakhiri posting hari ini dengan sesuatu yang tidak banyak pengembang ketahui… Katakanlah, misalnya, Anda sedang mengerjakan sebuah proyek dan ingin melihat nilai suatu objek sebelum dan sesudah memperbaruinya. Untuk melakukan ini, kemungkinan Anda akan console.log variabel sebelum membuat perubahan dan sesudahnya, seperti yang Anda lihat di GIF berikut:

Pada contoh sebelumnya, kami mencatat objek yang berisi nilai yang ditetapkan ke 1. Kami kemudian memperbarui nilai ke 200 dan mencatat objek lagi. Orang akan mengharapkan log pertama untuk selalu menunjukkan nilai asli (1), tetapi perhatikan bagaimana, ketika kita memperluas objek, itu benar-benar menunjukkan nilai baru 200. Apa yang terjadi?

Pada dasarnya, pesan log memiliki referensi ke objek dan, oleh karena itu, ketika kami memperluasnya, itu menunjukkan kepada kami objek seperti sekarang dan tidak seperti saat log dibuat. Mutabilitas sialan!

Untuk mengatasi masalah ini, cukup kirimkan salinan ke log (perpustakaan seperti lodash dan metode cloneDeep membuatnya sangat mudah). Dengan cara ini, objek pertama yang dicatat akan menjadi salinan yang tidak dapat dimutasi (karena Anda tidak akan memiliki referensi untuk itu):

Dan itu saja untuk hari ini! Saya harap Anda menyukai posting ini. Jika Anda ingin informasi lebih lanjut tentang semua yang dapat Anda lakukan dengan console , lihat dokumentasi di MDN. Jangan lupa untuk membagikannya dengan teman-teman Anda? Dan jika Anda melakukan sesuatu yang berbeda atau memiliki saran untuk dibagikan kepada pembaca kami, beri kami komentar?

Gambarkan destacada Tim van der Kuip di Unsplash.