Elemen Debug Pengembang DOM pada Halaman Anda Dengan Satu Baris Kode

Berapa kali Anda berjuang untuk temukan satu masalah khusus mengacaukan tata letak CSS Anda? Dari tag penutup yang hilang ke saudara kandung yang tidak tepat, masalah CSS adalah selusin sepeser pun. Dan dengan debugger tata letak CSS ini, prosesnya adil menjadi jauh lebih mudah.

Satu baris kode ini akan melintasi DOM dan garis besar setiap elemen dengan warna yang berbeda. Dengan cara ini Anda bisa memvisualisasikan lebih baik bagaimana CSS Anda bekerja (atau tidak berfungsi) dan cepat menemukan area masalah.

GitHub memungkinkan pengembang untuk simpan sedikit kode disebut Intisari. Ini semua open source dan gratis untuk simpan untuk Anda gunakan sendiri. Itu sebabnya debugger CSS ini sangat berguna. Ini menggabungkan kecakapan modern Chrome DevTools dengan kesederhanaan bookmarklet browser.

Untuk menggunakan kode ini, Anda harus terlebih dahulu salin versi mana saja yang paling Anda sukai dari halaman Gist. Maka kamu rekatkan kode itu ke jendela Terminal Anda dan menjalankannya. Anda harus berakhir dengan hasil seperti ini:

Sekarang dimungkinkan simpan kode ini sebagai bookmarklet di bilah alat browser Anda. Tetapi jika Anda pengguna Chrome, Anda bisa simpan kode JS ini sebagai cuplikan kode yang jauh lebih mudah dijalankan.

Cuplikan kode ini dapat berupa teringat berulang-ulang di klik tombol. Kamu bisa parsing setiap halaman, penuh dengan garis besar CSS berwarna-warni ini, untuk elemen DOM dari orang tua dan anak-anak.

Namun, Anda seharusnya tidak merasa terbatas hanya untuk Chrome. Cuplikan ini berfungsi untuk semua browser utama, termasuk Firefox, Safari, Opera, dan Internet Explorer.

Dan bagi siapa saja yang penasaran untuk mempelajari cara kerjanya, Anda dapat memeriksa versi beranotasi dengan komentar untuk setiap baris kode.

Intisari ini penuh komentar pengguna terkait dan pembaruan dari pengembang lain membantu membuatnya lebih kecil dan lebih efisien. Tetapi dalam kondisi saat ini, ini adalah salah satu cara paling sederhana debug setiap DOM dengan satu baris kode.