Kode rentan terhadap kesalahan. Kemungkinan besar Anda akan membuat kesalahan… Oh, apa yang saya bicarakan? Anda pasti akan membuat kesalahan, setidaknya jika Anda manusia, bukan robot.
Namun di browser, pengguna tidak melihat kesalahan secara default. Jadi kalau ada yang salah di scriptnya, kita tidak akan melihat apa yang rusak dan tidak bisa memperbaikinya.
Untuk melihat kesalahan dan mendapatkan banyak informasi berguna lainnya tentang skrip, “alat pengembang” telah tertanam di browser.
Sebagian besar pengembang condong ke Chrome atau Firefox untuk pengembangan karena browser tersebut memiliki alat pengembang terbaik. Peramban lain juga menyediakan alat pengembang, terkadang dengan fitur khusus, tetapi biasanya “mengejar” Chrome atau Firefox. Jadi sebagian besar pengembang memiliki browser “favorit” dan beralih ke browser lain jika masalahnya khusus pada browser.
Alat pengembang sangat ampuh; mereka memiliki banyak fitur. Untuk memulai, kita akan mempelajari cara membukanya, melihat kesalahan, dan menjalankan perintah JavaScript.
Buka halaman bug.html.
Ada kesalahan dalam kode JavaScript di dalamnya. Itu tersembunyi dari pandangan pengunjung biasa, jadi mari kita buka alat pengembang untuk melihatnya.
Tekan F12 atau, jika Anda menggunakan Mac, tekan Cmd + Opt + J .
Alat pengembang akan terbuka di tab Konsol secara default.
Tampilannya seperti ini:
Tampilan sebenarnya dari alat pengembang bergantung pada versi Chrome Anda. Itu berubah dari waktu ke waktu tetapi harus serupa.
Di sini kita bisa melihat pesan kesalahan berwarna merah. Dalam hal ini, skrip berisi perintah “lalala” yang tidak diketahui.
Di sebelah kanan, ada tautan yang dapat diklik ke sumber bug.html:12 dengan nomor baris tempat terjadinya kesalahan.
Di bawah pesan kesalahan, ada simbol > berwarna biru. Ini menandai “baris perintah” tempat kita dapat mengetikkan perintah JavaScript. Tekan Enter untuk menjalankannya.
Sekarang kita dapat melihat kesalahan, dan itu sudah cukup sebagai permulaan. Kita akan kembali ke alat pengembang nanti dan membahas proses debug lebih mendalam di bab Debugging di browser.
Masukan multi-baris
Biasanya, saat kita memasukkan sebaris kode ke dalam konsol, lalu menekan Enter , kode tersebut akan dijalankan.
Untuk menyisipkan beberapa baris, tekan Shift + Enter . Dengan cara ini seseorang dapat memasukkan potongan kode JavaScript yang panjang.
Sebagian besar browser lain menggunakan F12 untuk membuka alat pengembang.
Tampilan & nuansanya sangat mirip. Setelah Anda mengetahui cara menggunakan salah satu alat ini (Anda dapat memulai dengan Chrome), Anda dapat dengan mudah beralih ke alat lain.
Safari (browser Mac, tidak didukung oleh Windows/Linux) sedikit istimewa di sini. Kita perlu mengaktifkan "menu Kembangkan" terlebih dahulu.
Buka Preferensi dan buka panel "Lanjutan". Ada kotak centang di bagian bawah:
Sekarang Cmd + Opt + C dapat mengaktifkan konsol. Perhatikan juga bahwa item menu teratas baru bernama “Kembangkan” telah muncul. Ini memiliki banyak perintah dan opsi.
Alat pengembang memungkinkan kita melihat kesalahan, menjalankan perintah, memeriksa variabel, dan banyak lagi.
Mereka dapat dibuka dengan F12 untuk sebagian besar browser di Windows. Chrome untuk Mac memerlukan Cmd + Opt + J , Safari: Cmd + Opt + C (harus diaktifkan terlebih dahulu).
Sekarang kita sudah menyiapkan lingkungannya. Di bagian selanjutnya, kita akan membahas JavaScript.