Kunci untuk menyahpepijat alat pemaju pelayar aplikasi HTML adalah untuk menguasai beberapa fungsi teras. 1. Gunakan fungsi "Semak" untuk melihat struktur DOM untuk mengesahkan sama ada unsur -unsur wujud dan sama ada tag bersarang dengan betul; 2. Edit HTML dan CSS dalam masa nyata, menguji kesan pengubahsuaian dan konflik gaya semak; 3. Gunakan panel model kotak untuk memeriksa parameter susun atur seperti margin, sempadan, padding; 4. Tetapkan titik putus atau dengar perubahan DOM untuk mengesan pengubahsuaian dinamik JavaScript. Mahir dalam menggunakan kaedah ini dengan cekap dapat mencari dan menyelesaikan masalah biasa dalam debugging HTML.

Debugging HTML dan menggunakan alat pemaju penyemak imbas sebenarnya agak mudah. Kuncinya adalah untuk menguasai beberapa fungsi dan idea yang sama. Penyemak imbas arus perdana seperti Chrome, Edge, atau Firefox semuanya datang dengan alat pemaju (DevTools), yang dapat membantu anda dengan cepat mencari masalah struktur HTML, konflik gaya, atau alasan untuk tidak memaparkan unsur -unsur.

Lihat Struktur Halaman dan Status Unsur

Cara yang paling biasa untuk membuka DevTools adalah klik kanan elemen pada halaman dan pilih "Periksa". Dengan cara ini, anda dapat melihat kedudukan elemen HTML yang sepadan di dalam pokok DOM.

• Anda boleh mengembangkan dan meruntuhkan label untuk melihat sama ada hubungan ibu bapa dan kanak-kanak betul.
• Sesetengah elemen boleh dikeluarkan secara dinamik atau ditambah oleh JavaScript, dan perubahan dapat dilihat dalam panel Elemen.
• Jika elemen tidak dipaparkan seperti yang diharapkan, pertama mengesahkan sama ada ia benar -benar wujud di DOM, sama ada ia dipaparkan: Tiada atau dipotong oleh elemen induk.

Kadang -kadang susun atur tidak konsisten, hanya kerana label tidak ditutup atau tahap yang salah bersarang, jadi jelas sekilas dengan devtools.

Ubah suai hasil ujian HTML dan CSS dalam masa nyata

Satu lagi perkara yang kuat tentang DevTools adalah keupayaan untuk mengedit HTML dan gaya dalam masa nyata, yang sangat berguna untuk debugging.

• Klik dua kali nama tag HTML untuk mengubah suai jenis tag, seperti menukar div ke rentang.
• Mengubah nama kelas dan nilai atribut boleh berkuatkuasa dengan segera.
• Dalam panel Styles, anda boleh melumpuhkan peraturan CSS buat sementara waktu untuk melihat sama ada ia mempengaruhi susun atur atau warna, dll.

Sebagai contoh, jika anda mendapati bahawa warna latar belakang butang tidak betul, anda boleh menyebarkan peraturan gaya satu demi satu di panel Styles untuk mengetahui bahagian CSS mana yang meliputi tetapan anda.

Semak model kotak dan persembahan susun atur elemen

Di sebelah kanan panel Elemen, biasanya terdapat panel model kotak yang memaparkan dimensi margin, sempadan, padding, dan kandungan elemen yang dipilih sekarang.

• Sekiranya susun atur tidak kelihatan betul, pandangan ini dapat membantu anda dengan cepat menentukan sama ada padding terlalu besar atau margin bertindih.
• Ketinggian atau lebar beberapa elemen tidak dilanjutkan seperti yang diharapkan, jadi anda juga dapat melihat nilai -nilai khusus di sini.
• Ia amat berguna apabila menyahpepijat pada terminal mudah alih. Sebagai contoh, jika saiz kotak berubah di bawah pertanyaan media tertentu, anda boleh menyeret simulator peranti secara langsung untuk memerhatikan perubahan.

Masalah mengenai pengubahsuaian dinamik skrip kedudukan

Jika HTML anda dihasilkan secara dinamik atau diubahsuai melalui JavaScript, kadang -kadang kod statik tidak dapat melihat sebarang masalah, anda perlu menggunakan fungsi lain dari DevTools.

• Menggunakan fungsi "Breakpoint", cari fail JS dalam panel Sumber, klik titik break nombor baris, dan apabila anda melaksanakan langkah itu, anda boleh menyemak sama ada DOM dikemas kini.
• Gunakan fungsi "Dengar Perubahan Dom": Klik kanan elemen → Break On → Subtree Modifications. Apabila kandungan elemen ini diubahsuai oleh JS, program ini akan dijeda untuk memudahkan penjejakan sumber.
• Sebagai contoh, jika anda tidak dapat melihat div pada halaman, tetapi ia ditulis dalam kod sumber, mungkin JS memadamkannya atau menggantikan kandungannya. Dalam kes ini, anda boleh menggunakan fungsi ini untuk menangkap sumber.

Pada dasarnya itu sahaja. Walaupun alat pemaju penyemak imbas mempunyai banyak fungsi, untuk debugging HTML, menguasai operasi teras ini cukup. Kuncinya adalah untuk mengetahui panel mana yang akan mencari petunjuk ketika menghadapi masalah, dan tidak bergantung pada meneka setiap masa.

Atas ialah kandungan terperinci Debugging HTML dengan alat pemaju penyemak imbas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!