Inti dari setiap halaman web atau situs web adalah HTML yang pada dasarnya adalah apa yang membentuk situs web dan sebenarnya menggambarkan semua konten di dalam situs Anda. Meskipun HTML adalah bahasa yang sederhana, banyak masalah yang dapat muncul dari format yang tidak sesuai hingga masalah rendering yang besar. Mampu men-debug masalah-masalah ini adalah kompetensi inti bagi para pengembang web, jadi kami juga menyertakan tips dan trik tentang cara mendiagnosis masalah dengan cepat! Pada artikel ini kami akan mengulas alat terbaik untuk mengidentifikasi kesalahan HTML.
Masalah HTML yang umum terjadi
Tinjauan Umum tentang kesalahan HTML yang paling umum di antara para pengembang Beberapa di antaranya adalah:
- Tag yang tidak tertutup/hilang: sintaks yang tidak benar, elemen yang bersarang secara tidak benar, atau menggunakan tag yang tidak didukung oleh tipe dokumen dapat menyebabkan masalah tata letak.
- Atribut yang tidak valid: Salah menempatkan atau salah mengeja Atribut dapat menyebabkan hilangnya fungsionalitas, bug pada rendering cat kustom (akan dibahas lebih lanjut), dan berbagai macam masalah lainnya.
- Tautan File Tidak Valid atau Hilang: tidak menautkan css atau js eksternal dengan benar dapat merusak gaya atau fungsionalitas Anda.
- Kurangnya Situs Web yang Dapat Diakses: Penggunaan HTML yang tidak terstruktur dengan baik dapat menyulitkan pengguna dengan disabilitas untuk berinteraksi dengan situs.
- Masalah Kompatibilitas Peramban Perang Salib: Berbagai elemen dalam HTML memiliki perilaku yang berbeda pada browser yang berbeda yang menghasilkan output yang tidak dapat dirender.
Jadi, dengan semua hal tersebut - bagaimana Anda men-debug HTML?
.jpeg)
Sumber: digitalsolusigrup.co.id
1. Menggunakan Alat Pengembang Peramban untuk Melihat HTML
Cara pertama dan bisa dibilang cara yang paling ampuh untuk melakukan debug adalah melalui alat pengembang peramban. Peramban web, seperti Chrome dan Firefox (Edge juga!) juga memiliki alat pengembang bawaan yang dapat digunakan oleh pengembang untuk memeriksa atau mengedit HTML secara real time.
Untuk membuka alat ini, cukup klik kanan di mana saja pada halaman web dan klik inspect atau Anda dapat menekan F12. Ini akan menunjukkan kepada Anda struktur dokumen HTML dan bagaimana sebuah halaman dirender. Hal ini memungkinkan Anda untuk mengarahkan kursor ke elemen dan melihat dimensi elemen tersebut, gaya yang diterapkan pada elemen tersebut, dan kesalahan apa pun yang terkait dengannya.
Selain dari struktur html, ini juga mencantumkan kesalahan dalam konsol seperti file yang hilang atau sesuatu yang berkaitan dengan sintaksis. Karena Anda benar-benar dapat melakukan pengeditan HTML dan CSS secara langsung di dalam alat pengembang - ini sangat membantu dalam hal iterasi yang lebih cepat, pengujian perbaikan cepat, dll. tanpa harus me-refresh seluruh halaman.
2. Validator Online (Validasi HTML)
Layanan Validasi Markup W3C adalah validator online yang memeriksa validitas berbagai jenis markup HTML. Layanan ini memiliki validator yang memvalidasi kode HTML Anda dengan spesifikasi resmi dan menunjukkan kepada Anda kesalahan serta peringatan.
Dengan validator HTML, Anda dapat memasukkan referensi atau tautan ke kode Anda dan alat ini akan menganalisisnya untuk Anda. Beberapa masalah umum yang dideteksi adalah tag penutup yang hilang, penempatan elemen yang salah, dan atribut yang sudah usang. Validator memastikan bahwa HTML bersih, terstruktur dengan baik, dan bekerja di lintas platform.
Namun perlu diingat bahwa tidak semua peringatan sangat penting - atau bahkan relevan dengan bagaimana halaman Anda akan ditampilkan, dan kegunaan validasi bisa berbeda-beda. Meskipun hal itu mungkin benar, mengatasi peringatan ini dapat membantu aksesibilitas dan juga kompatibilitas.
3. Menggunakan Alat Pemeriksa Linting
Linting tools menjalankan pemeriksaan otomatis pada HTML Anda (dan juga CSS, JavaScript) untuk membantu Anda menemukan masalah. Untuk linting HTML dapat dilakukan dengan HTMLHint dan eslint-plugin-html untuk editor teks populer seperti VS Code, Sublime Text, Atom, dll:-
Ketika Anda mengetik di editor, linting HTML mengikuti dan menangkap kesalahan sintaksis (seperti jika Anda lupa tanda kutip penutup / tag ...) Memberikan kemampuan kepada pengembang untuk memperbaiki masalah dengan cepat sebelum mereka menjalankan kode mereka di browser. Banyak linter juga memungkinkan Anda untuk mengubah berbagai opsi konfigurasi di mana Anda dapat menerapkan pedoman gaya pengkodean, sesuatu yang sangat membantu ketika mengerjakan proyek yang lebih besar dan penegakan hukum itu penting.
4. Menguji Kompatibilitas Peramban sekarang
Namun, seperti yang saya nyatakan sebelumnya, berurusan dengan HTML itu sulit karena apa yang terlihat bagus di satu browser bisa terlihat sangat berbeda di browser lain. CrossBrowserTesting, BrowserStack, atau Mode Desain Responsif bawaan dalam alat pengembang peramban apa pun dapat membantu pengembang untuk memperbaiki bug lintas peramban.
Platform-platform ini memungkinkan Anda untuk melihat rendering situs web Anda di beberapa browser serta sistem operasi sehingga membantu mengidentifikasi masalah kompatibilitas. Hal ini terkadang dilakukan secara native oleh alat yang sama atau harus diuji secara manual sehingga Anda tahu apa yang akan bekerja dan tidak di beberapa versi browser dari kode HTML Anda.
5. Periksa kesalahan aksesibilitas
Pengembang harus menyediakan sebanyak mungkin struktur dan informasi tentang halaman kepada pembaca layar, sehingga konten dapat diakses oleh mereka yang berkunjung melalui teknologi bantu. Audit aksesibilitas: Alat bantu seperti Axe DevTools dan WAVE akan melakukan audit aksesibilitas, memindai hal-hal seperti tag alt yang hilang pada gambar, tidak menggunakan judul dengan benar dalam hirarki, atau kontras warna yang terlalu lemah.
Ini adalah alat pengembang peramban yang dapat membantu Anda memperbaiki masalah aksesibilitas sebagai bagian dari alur kerja debugging normal Anda.