Dari kursus: Pelatihan Esensial HTML

Men-debug HTML - Tutorial HTML

Dari kursus: Pelatihan Esensial HTML

Mulai uji coba gratis 1 bulan Beli untuk tim saya

Men-debug HTML

“

- Sebelum kita masuk ke lebih banyak elemen HTML, saya ingin memastikan Anda tahu cara memeriksa HTML di alat pengembang browser. Di semua browser desktop saat ini, ada kokpit rahasia informasi tentang apa yang terjadi dengan kode dan kinerja situs web. Mari kita lihat di Firefox. Di sini saya punya demo di Codepen yang menggabungkan banyak elemen HTML yang telah kita pelajari. Saya akan membuka demo Codepen ini di tab baru, jadi kami hanya memiliki demo dan tidak semua bagian untuk situs web Codepen. Sekarang, saya akan mengklik kanan ini dan pergi untuk memeriksa elemen, atau sebagai gantinya kita bisa pergi ke tools, pengembang web, inspektur. Ini membuka alat pengembang. Di bagian atas sini, ada banyak tab lain dengan halaman demi halaman dari alat yang berbeda. Seperti yang saya katakan, ini adalah kokpit kontrol. Tapi mari kita abaikan semua itu, dan mari kita lihat inspekturnya. Kami punya tiga panel di sini. Di sebelah kiri adalah HTML, tengah untuk CSS dan panel kanan memiliki beberapa opsi lagi. Anda dapat mengklik lebih banyak tab di sini dan melihat alat tata letak, daftar perubahan apa pun yang telah Anda buat pada CSS dan panel tentang font. Tapi kita tidak akan memikirkan panel kanan ini atau panel tengah ini untuk CSS sekarang. Mari kita lihat saja panel kiri, ini adalah HTML kita. Saya dapat melihat di sini DOM yang telah dibuat browser, Model Objek Dokumen. Firefox membaca HTML yang saya kirimkan, dan kemudian merevisinya, ia mencoba yang terbaik untuk memperbaiki kesalahan yang mungkin saya miliki, dan membuat versinya sendiri, versi DOM. Kita dapat melihat apa judul Lebah dibungkus dengan h1, dan di bawah itu, Peternakan lebah adalah h2, dan kemudian kita dapat melihat bahwa ada dua paragraf. Kita melihat elemen p, tetapi alih-alih kata-kata dalam paragraf, itu hanya mengatakan, "..." Dan ada segitiga kecil di sini, Anda dapat mengubah segitiga ini dan mengungkapkan apa yang ada di dalamnya. Saya bisa melihat di paragraf kedua, ada elemen sup di sekitar angka untuk catatan kaki. Lebih jauh ke bawah, saya dapat melihat elemen pra dan kutipan blok, di dalam kutipan blok saya memiliki elemen kutip. Inspektur mewakili pohon DOM di sini, silsilah keluarga elemen, dan itu akan sangat berguna. Banyak browser memiliki alat pengembang, Safari, Chrome, Edge, dan semuanya memiliki panel HTML yang seperti ini. Mereka menggunakan cara yang sama untuk menjorok ke berbagai hal dan menggunakan segitiga kecil ini untuk memahami pohon DOM. Kita dapat menggunakan alat pengembang untuk memeriksa situs web apa pun di internet, dan mengintip di bawah tenda untuk melihat bagaimana pengembang lain menggunakan HTML. Beginilah cara saya mendapatkan ide ketika saya tidak yakin markup apa yang akan digunakan, saya akan pergi ke situs web lain, menemukan beberapa konten yang mirip dengan konten yang saya coba markup, dan menggunakan alat pengembang untuk mencari tahu elemen apa yang mereka gunakan. Terutama jika situs web dibangun oleh tim yang saya hormati, melihat pekerjaan orang lain dapat membantu saya untuk lebih memahami cara menyusun HTML saya sendiri. Anda juga dapat menggunakan pemeriksa HTML di alat dev untuk membantu kami men-debug kesalahan. Mari kita lihat beberapa kode yang memiliki sesuatu yang salah dengan itu. Di sini saya memiliki daftar yang tidak berurutan dengan empat item, dan mereka harus menghitung satu, dua, tiga, empat, tetapi jika Anda melihat hasilnya ada yang kosong, dan itu membuang penghitungan, kami mendapatkan lima item, jadi mengapa? Baiklah, mari kita klik kanan pada ini dan lihat di alat pengembang kita dapat melihat bahwa sebenarnya browser melakukan sesuatu untuk memperbaiki HTML yang diterimanya ketika membangun pohon DOM. Dan ia berpikir bahwa harus ada lima item, satu, dua, kosong, tiga, empat, jadi apa yang terjadi? Yah saya dapat melihat bahwa ada sesuatu yang salah sebelum apa yang seharusnya menjadi item ketiga, dan saya tahu browser menambahkan lebih banyak tag, itu menambahkan sepasang tag tambahan. Mari kita lihat kembali HTML asli saya dan di suatu tempat sebelum istilah ketiga, oh begitu, itu, saya mengatakan kepada browser untuk memulai item daftar lain di sini daripada memberi tahu itu akhir, jadi mari kita perbaiki itu. Jika saya meletakkan garis miring di tempat yang hilang, kita dapat melihat sekarang bahwa itu berfungsi, DOM sudah diperbaiki. Setiap kali Anda tidak yakin apa yang terjadi, raih alat pengembang di browser untuk menyelesaikan masalah.

Konten