Elemen DOM Debug Pembangun pada Halaman Anda Dengan Satu Baris Kod

Berapa kali anda berjuang untuk mencari satu masalah tertentu mengganggu susun atur CSS anda? Daripada tag tutup yang hilang kepada adik-beradik yang tidak bersarang, isu CSS adalah sedozen. Dan dengan penyahpepijat layout CSS ini, prosesnya semata-mata mendapat lebih mudah.

Satu baris kod ini akan melintasi DOM dan gariskan setiap elemen dengan warna yang berbeza. Dengan cara ini anda boleh lebih baik memvisualisasikan bagaimana CSS anda berfungsi (atau tidak berfungsi) dan cepat cari masalah masalah.

GitHub membolehkan pemaju untuk simpan bit kecil kod dipanggil Gist. Ini semua sumber terbuka dan percuma simpan untuk kegunaan anda sendiri. Itulah sebabnya debugger CSS ini sangat berguna. Ia menggabungkan kehebatan moden DevTools Chrome dengan kesederhanaan penanda buku pelayar.

Untuk menggunakan kod ini, anda harus terlebih dahulu salin mana-mana versi yang anda suka yang terbaik dari halaman Gist. Kemudian kamu tampal kod itu ke dalam tetingkap Terminal anda dan jalankannya. Anda harus berakhir dengan hasil seperti ini:

Sekarang, boleh dilakukan simpan kod ini sebagai buku panduan dalam bar alat penyemak imbas anda. Tetapi jika anda pengguna Chrome, anda boleh simpan kod JS ini sebagai coretan kod yang lebih mudah untuk dijalankan.

Coretan kod ini boleh ditarik balik berulang kali pada klik butang. Awak boleh parse setiap halaman, penuh dengan garis besar CSS yang berwarna-warni ini, untuk elemen DOM ibu bapa dan anak-anak sama.

Walau bagaimanapun, anda tidak seharusnya merasa terhad kepada Chrome sahaja. Potongan ini berfungsi untuk semua pelayar utama, termasuk Firefox, Safari, Opera, dan Internet Explorer.

Dan bagi sesiapa yang ingin tahu bagaimana cara ini berfungsi, anda boleh menyemak versi beranotasi dengan komen untuk setiap baris kod.

Gist ini penuh komen pengguna berkaitan dan kemas kini daripada pemaju lain membantu menjadikannya lebih kecil dan lebih cekap. Tetapi dalam keadaan semasa, ini adalah salah satu cara paling mudah untuk debug sebarang DOM dengan satu baris kod.