Apa itu Konsol Pengembang?
Konsol Pengembang adalah lingkungan pengembangan terpadu dengan rangkaian alat yang bisa Anda gunakan untuk membangun, debugging, dan menguji aplikasi langsung di peramban Anda. Ini merekam (mencatat) informasi terkait halaman web, seperti permintaan jaringan, HTML, CSS, JavaScript, peringatan, dan kesalahan. Tangkapan layar peringatan di Konsol Pengembang bisa sangat membantu tim dukungan Elfsight saat mereka menyelesaikan masalah yang Anda hadapi dengan widget kami.
Cara Membuka Konsol Pengembang di Berbagai Peramban
Cukup beberapa klik untuk membuka konsol di browser apa pun yang Anda gunakan, dan Anda juga bisa membukanya dengan pintasan keyboard. Panduan di bawah ini berisi instruksi singkat tentang cara membuka konsol di semua peramban paling populer serta tangkapan layar prosesnya.
Cara membuka konsol pengembang di Chrome
Untuk membuka panel Pengembang di Google Chrome, Anda perlu mengklik ikon tiga titik di pojok kanan atas jendela peramban, klik Alat Lainnya di mana Anda akan menemukan Alat Pengembang dalam daftar dropdown.
Opsi lain adalah menggunakan hotkey alat pengembang Chrome: F12 (Windows/Linux), dan Option + ⌘ + J (macOS).
Anda akan melihat konsol di bagian bawah atau di sisi kanan halaman Chrome. Pilih opsi Console dan mulai memeriksa kinerja kode Anda.
Selanjutnya, seiring Anda mempelajari cara membuka konsol pengembang di Chrome, Anda akan lebih terbiasa dengan proses membuka alat pengembang di berbagai browser.
Buka Alat Pengembang Opera
Anda bisa menggunakan konsol Opera untuk memeriksa, mengedit, dan debugging HTML, CSS, dan JavaScript. Untuk menggunakannya, Anda perlu menggunakan pintasan berikut: Ctrl+Shift+C untuk membuka Konsol Alat Pengembang atau Ctrl+Shift+I untuk membuka alat pengembang terlebih dahulu dan selanjutnya memilih Console.
Mulai konsol web Firefox
Konsol Mozilla dapat dibuka dengan mengklik Web Developer di menu kanan atas, lalu memilih Browser Console. Anda juga bisa menggunakan pintasan alat pengembang Firefox, yaitu Ctrl+Shift+J.
Aktifkan alat pengembang di Safari
Untuk membuka konsol di Safari, Anda perlu mengaktifkan Menu Pengembang. Caranya, buka preferensi Safari (Menu Safari > Preferensi) dan pilih Tab Lanjutan.
Selanjutnya, Anda akan membuka konsol pengembang di Safari dengan mengklik Pengembang > Tampilkan Konsol Javascript. Anda juga bisa memanfaatkan pintasan Option + ⌘ + C. Tab konsol akan terbuka secara otomatis, Anda tidak perlu memilihnya.
Buka konsol Microsoft Edge
Anda dapat membuka konsol peramban Edge dengan mengklik F12 Developer Tools di menu dropdown, atau dengan menekan F12. Anda juga bisa mengklik kanan pada elemen mana pun di halaman web dan memilih Inspect Element.
Buka Konsol Internet Explorer
Konsol pengembangan Internet Explorer dapat dibuka dengan cara yang sama seperti konsol Edge. Klik F12 Developer Tools di menu dropdown atau cukup tekan tombol F12 key. Dengan melakukan ini, Anda akan berhasil mengakses konsol Internet Explorer dan dapat mulai memeriksanya.
Tab utama di Alat Pengembang
Berikut gambaran singkat tentang tab utama di antara Developer Tools. Kami telah meninjau semuanya menggunakan contoh browser Google Chrome.
Tab Elemen
Panel Elemen adalah alat yang sangat membantu bagi Anda yang ingin memeriksa kinerja CSS dan HTML pada halaman web Anda. Anda dapat mengklik kanan elemen mana pun di halaman, pilih Inspect Element, dan melihat atribut elemen yang disorot dalam kode.
Konsol
The Konsol tab di Chrome Developer Tools berfungsi untuk menampilkan cara kerja skrip pada halaman web. Ini adalah interpreter perintah yang dapat Anda gunakan untuk memulai mesin skrip dan memasukkan perintah untuk menjalankan skrip. Jika tim dukungan kami meminta Anda mengambil tangkapan layar konsol Anda, mereka akan membutuhkan gambar yang diambil pada tab konsol.
Panel Sumber
Anda bisa menggunakan Sources tab di Chrome DevTools untuk mengedit JavaScript dan CSS, melihat berkas, membuat potongan kode JavaScript, dan menggunakannya lebih lanjut. Selain itu, tab ini juga dapat membantu dalam debugging kode JavaScript.
Tab Jaringan
Panel Jaringan dapat digunakan sebagai alat pengujian, yang memeriksa kinerja halaman web dan mengenali masalah yang memperlambat situs. Tab Jaringan di Chrome mulai merekam semua permintaan jaringan setelah Anda membuka DevTools. Anda dapat menyortirnya lebih lanjut berdasarkan berbagai properti.
Tab Kinerja
Panel Kinerja memungkinkan Anda merekam kinerja waktu eksekusi dan pemuatan seiring waktu. Panel ini memperlihatkan seberapa baik situs web berfungsi setelah sepenuhnya dimuat dan digunakan oleh pengunjung. Anda bisa memilih untuk merekam kinerja atau mengambil serangkaian tangkapan layar dari prosesnya.
Tab Memori
Anda bisa menggunakan tab Memori di Chrome untuk mendiagnosis dan memperbaiki masalah memori seperti penumpukan memori, pengumpulan sampah, dan kebocoran memori. Semua masalah ini memengaruhi kinerja halaman. Jika masalah ini tidak diselesaikan, situs Anda akan menjadi lambat dan tidak menarik bagi pengunjung.
Panel Aplikasi
Dengan bantuan tab Aplikasi Anda dapat men-debug Progressive Web Apps (PWA); memeriksa dan mengelola penyimpanan, database, dan cache; memeriksa dan menghapus Cookies; serta memeriksa Sumber Daya.
Keamanan
Tab Keamanan dapat berguna jika Anda ingin men-debug masalah konten campuran dan masalah sertifikat. Situs web ini dianggap tidak aman ketika URL yang Anda kunjungi diminta melalui HTTP. Menurut persyaratan web modern, hal ini sebaiknya dilakukan melalui protokol HTTPS. Jika Anda melihat halaman tersebut mengandung konten campuran, artinya halaman tersebut sebagian terlindungi dan rentan terhadap penyadap.
Tab Lighthouse
Lighthouse adalah alat otomatis untuk meningkatkan kualitas aplikasi web. Ini terintegrasi langsung ke Chrome DevTools. Ia menawarkan audit kinerja, Aksesibilitas, Aplikasi Web Progresif, SEO, dan lainnya.
Peringatan Konsol dan Kesalahan Umum pada Widget Elfsight
Terkadang ada sesuatu yang salah pada kerja widget Elsfight. Jangan khawatir jika Anda melihat peringatan atau error berwarna merah di konsol. Jika Anda mengetahui sebab terjadinya, kemungkinan Anda bisa memperbaikinya sendiri. Di bawah ini Anda akan menemukan daftar kegagalan umum yang mungkin muncul di konsol.
Ini dua kesalahan terkait semua widget kami:
WIDGET DIBLOKIR – Anda telah memblokir domain situs di akun Elfsight Anda jika kesalahan mengarah ke <a rel=”noopener noreferrer” target=”_blank” href=”https://apps.elfsight.com/”>apps.elfsight.com</a>.
WIDGET TIDAK DITEMUKAN – Anda mungkin tidak sengaja menghapus widget di akun Anda. Periksa.
Tenang, tidak masalah. Sekarang kita akan membahas beberapa kesalahan pada kerja beberapa widget dan integrasi.
Masalah Umum Google Maps
Untuk Google Maps, kesalahan biasanya muncul jika kunci API bermasalah.
ExpiredKeyMapError – kunci API telah kedaluwarsa atau tidak dikenali. Dalam kebanyakan kasus Anda perlu membuat yang baru. Jika Anda mendapatkan kesalahan ini tepat setelah membuat kunci API baru, Anda perlu menunggu antara 1 hingga 8 menit atau mengaktifkan Places API secara terpisah.
RefererNotAllowedMapError – Elfsight URL memuat Maps JavaScript API belum diizinkan sebagai referer. Anda perlu memeriksa pengaturan referer dari API key Anda di Google Cloud Platform Console. Saat menggunakan widget kami, Anda perlu menambahkan kami sebagai referer. Berikut artikel panduannya tentang cara melakukan ini dengan benar.
ClientBillingNotEnabledMapError – Untuk menggunakan widget Google Maps, Anda perlu memiliki akun Penagihan. Kegagalan ini terjadi karena Anda belum mengaktifkan penagihan pada proyek Anda. Solusinya adalah mengaktifkan penagihan pada Proyek Google Cloud yang terkait dengan ID klien ini. Anda bisa melakukannya di di sini.
BillingNotEnabledMapError – Saat menggunakan Google Maps, Anda perlu mengaktifkan penagihan.
Kegagalan Galeri YouTube di Konsol
Jika Anda menggunakan Galeri Video YouTube Elfsight, Anda tidak perlu repot soal sebagian besar masalah yang tercantum di bawah. Namun, ada dua masalah umum yang juga bisa terjadi pada widget kami.
quotaExceeded – YouTube menggunakan kuota untuk memungkinkan orang mengakses konten dan mengambilnya ke situs web atau aplikasi. Setelah kuota YouTube terlampaui, Anda akan melihat Galeri YouTube Anda berhenti bekerja secara tidak sengaja atau berjalan lambat di situs. Solusinya mungkin sebagai berikut:
- Dapatkan kunci API baru jika Anda mengambil konten YouTube sendiri;
- Hubungi tim dukungan kami di [email protected] jika Anda menggunakan Galeri YouTube Elfsight, yang jauh lebih mudah.
videoNotFound – Peringatan ini bisa muncul jika URL yang Anda masukkan untuk menautkan video YouTube tidak benar. Kadang-kadang pengguna menempelkan tautan ke halaman yang berisi video tersebut, tetapi bukan lokasi asli videonya, sehingga menyebabkan kesalahan. Periksa semuanya dan tempelkan tautan ke video aslinya.
Error pada Facebook Feed dan Instagram Feed
Jika Facebook Feed atau Instagram tidak berfungsi, Anda bisa memeriksa apa yang terjadi di Developer Console. Karena kedua aplikasi populer ini bekerja berdasarkan API Facebook, penjelasan kesalahan berikut mungkin berlaku untuk keduanya.
err_ssl_protocol_error ketika menggunakan widget Facebook atau Instagram Feed di situs Anda bisa disebabkan oleh beberapa alasan. Untuk mengatasinya, Anda bisa mencoba menyetel tanggal dan waktu yang benar, menghapus data penelusuran Chrome, atau menghapus status SSL Anda. Selain itu, jika Facebook Graph API menampilkan kesalahan, Anda bisa menggunakan fbtrace_id untuk mengetahui informasi lebih lanjut tentangnya. Namun, jika tidak ada yang membantu, Anda selalu bisa menghubungi tim dukungan kami.
rest_cannot_access – biasanya berarti bahwa widget pihak ketiga seperti plugin Password Protect mencegah widget kami bekerja dengan benar. Menonaktifkan layanan seperti itu akan membantu.
Halaman yang Anda minta tidak dapat ditampilkan saat ini – ini mungkin berarti aplikasi Facebook Anda sedang dalam mode pengembangan. Anda tidak akan melihat pesan kesalahan ini jika Anda adalah pengguna Elfsight Facebook Feed; namun, jika Anda melihat pesan ini, hubungi tim dukungan kami.
OAuthException pada Instagram secara khusus berarti status login atau token akses telah dicabut, kedaluwarsa, atau tidak valid karena alasan tertentu. Dalam hal ini, hubungi tim dukungan kami; para pengembang Elfsight akan memperoleh token akses baru atau memeriksa subkode, jika ada.
Kesalahan konsol yang paling umum
Sebagai pengembang web berpengalaman, Anda mungkin telah melihat kesalahan-kesalahan ini lebih sering daripada yang Anda inginkan. Kesalahan tersebut bisa terlihat di Chrome saat Anda membaca properti atau memanggil sebuah metode pada objek yang tidak terdefinisi. Anda bisa menguji blok try-catch untuk kesalahan-kesalahan tertentu ini di Chrome dan Safari Developer Console.
Jika Anda bukan programmer profesional, Anda bisa melewatkan panduan ini.
Uncaught TypeError: Tidak dapat membaca properti
Ini bisa terjadi karena banyak alasan, tetapi yang paling umum adalah inisialisasi state yang tidak tepat saat merender komponen UI. Ini mudah diperbaiki. Cara termudah: Inisialisasi state dengan nilai default yang masuk akal di konstruktor.
TypeError: ‘undefined’ bukan objek
Ini adalah galat yang terjadi di Safari ketika Anda membaca properti atau memanggil sebuah metode pada objek yang tidak terdefinisi. Anda bisa menguji ini di Konsol Pengembang Safari. Pada dasarnya mirip dengan galat di atas untuk Chrome, tetapi Safari menggunakan pesan galat yang berbeda.
(unknown): Script error
Jika Anda melihat kesalahan ini, sebaiknya Anda mendapatkan pesan aslinya terlebih dahulu. Anda bisa mendapatkannya dengan melakukan hal berikut: atur header Access-Control-Allow-Origin ke * yang berarti sumber daya dapat diakses dengan benar dari domain mana pun. Anda bisa mengganti * dengan domain Anda jika perlu: misalnya, Access-Control-Allow-Origin: www.example.org. Namun, mengelola beberapa domain menjadi rumit dan mungkin tidak sepadan jika Anda menggunakan CDN karena masalah caching yang bisa muncul.
Begini cara mengatasi error konsol JavaScript yang paling umum. Kami akan melengkapi daftar ini seiring kami dan klien kami menghadapi masalah lain.
Kesimpulan
Konsol Pengembang adalah alat hebat yang memungkinkan setiap pengembang mengakses banyak data tentang situs web mereka. Membukanya dan mulai menggunakan alat ini tidak terlalu sulit, namun akan membutuhkan waktu dan usaha—bersabarlah.
Kesalahan apa saja yang pernah Anda temui? Bagikan pengalaman Anda di kolom komentar di bawah; kami senang membahasnya bersama Anda!
Selain itu, ingat bahwa kami juga punya panduan keren lainnya; misalnya Anda bisa mengetahui bagaimana cara menyematkan ulasan bisnis Google di situs web!
