Belajar Debug Javascript

Beberapa hari yang lalu saya mendapatkan pertanyaan di video lama saya mengenai google one tap sign in.

Pertanyaannya seperti ini :

Izin tanya om. Logic untuk deteksi supaya kalau belum ada akun google tersimpan di browser maka kita munculkan aksi, ada di bagian mana ya om?

Di video saya dicontohkan bagaimana menggunakan google one tap sign ini, jadi halaman web kita akan membaca apakah browser ada akun google. Jika ada maka akan muncul pop up akses one tap sign in.

Dan yang ditanyakan oleh mas Bambang Abdi Setiawan adalah bagaimana kita mendeteksi jika di browser tersebut blm ada akun googlenya.

Sebenarnya untuk menjawab ini hanya dengan 1 solusi. Yaitu kita harus melakukan debug program.

Kebapa debug? Apakah ada hubungannya dengan bug?

Ya, ada hubungannya. Dalam bahasa Indonesia, bug adalah serangga. Ya, serangga, serangga yang sering mengganggu kegiatan melamun kita setiap saat.

Kita bayangkan saat kita melamun lalu ada serangga yang berputar-putar mengelilingi muka kita. Sangat mengganggu.

Jadi jika kita memiliki sebuah program dan ada bug didalamnya maka akan sangat mengganggu. Atau.. bisa jadi malah error dan aplikasi kita tidak dapat berjalan.

Jadi kita perlu melakukan debugging, kita usir bug tersebut. Yang sering saya lakukan untuk melakukan debug di javascript ini adalah console.log().

contoh penggunaan console.log() seperti ini

const value = 100
console.log(value)

Jika script diatas dijalankan maka pada terminal akan menghasilkan nilai 100 sesuai dengan variabel value

Mari kita buat error

const values = 100 // variable value kita ganti menjadi values
console.log(value)

maka pada terminal akan menampilkan error seperti ini

D:\youtube\one tap\debug.js:2
console.log(value)
            ^

ReferenceError: value is not defined
    at Object.<anonymous> (D:\youtube\one tap\debug.js:2:13)
←[90m    at Module._compile (internal/modules/cjs/loader.js:1085:14)←[39m
←[90m    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)←[39m
←[90m    at Module.load (internal/modules/cjs/loader.js:950:32)←[39m
←[90m    at Function.Module._load (internal/modules/cjs/loader.js:790:14)←[39m
←[90m    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)←[39m
←[90m    at internal/main/run_main_module.js:17:47←[39m

Perhatikan baris  ReferenceError: value is not defined.  Ini menandakan error karena value tidak didefinisikan. Untuk melihat baris errornya maka kita lihat diatasnya ada tulisan seperti ini.

D:\youtube\one tap\debug.js:2
console.log(value)
            ^

Itu menandakan pada file debug.js baris ke 2 dan perintah console.log(value) mengalami error. Perhatikan tanda pana atas kecil pada bawah kata value.

Jadi kita tinggal check variable value tersebut. Dan ternyata variable value tidak ada karena variable value sebelumya saya ubah menjadi values.

Itu saja contoh sederhana melakukan debug. Sekarang kita terapkan pada pertanyaan diatas. Kita clone dulu script google one tap untuk kita lakukan debug program agar kita bisa menyelipkan perintah saat tidak ada akun google pada browser.

Lanjut pada next tutorial ini


About Writer

Penulis adalah seorang penghobi ngulik komputer. Diawali dengan meledakkan beberapa PC pentium 1 untuk mengobati rasa penasarannya sampai akhirnya sekarang mempelajari bahasa pemrograman.

Berawal dari bahasa html dan css untuk membuat static page. Lalu mulai mengenal PHP untuk backend dan sekarang lebih menyukai NODEJS dan pembuatan aplikasi android ataupun ios

Tanya-tanya, hire pekerjaan, sekedar hay-hay'an silahkan contact di halaman Contact atau kunjungi channel saya