Hari ini saya menemukan masalah yang menarik yang membuat saya belajar lebih banyak tentang debugging di chrome. Saya ingin berbagi dengan Anda (tiba-tiba, siapa yang tidak tahu). Masalah yang muncul tidak rumit, tetapi ternyata tidak terlalu sepele.
Secara umum, saya sedang duduk menarik tata letak pihak ketiga yang siap untuk situs (titik ini penting, karena masalahnya terbang dari sana dan saya tidak siap untuk itu). Dan pada halaman saya akan memasukkan teks ke dalam rentang yang dapat diedit, yang dengan atribut contenteditable = true. Jadi saya melakukannya ratusan kali dan semuanya baik-baik saja, tetapi di sini satu, dua, dan tidak ada yang terjadi ... Dan secara visual elemen berubah di negara bagian: fokus. Yah, saya memikirkan sesuatu dengan gaya, sekarang saya akan segera menemukan dev-tools untuk membantu. Saya menemukan alat dev dan ... dan tidak menemukan apa pun ... Aneh. Saya membuka situs lain dengan fungsi yang sama di tab lain, semuanya berfungsi di sana, mari kita bandingkan nesting dan style. Satu lawan satu.
Pada prinsipnya, judulnya mengatakan apa yang saya jumpai, tetapi jika Anda membutuhkan detail dan solusi, saya meminta potongan, tidak akan ada banyak beech, tetapi dalam video pendek dan sedikit teks.
Secara umum, tentu saja, saya berasumsi bahwa ada sesuatu yang jelas dengan elemen di negara bagian: fokus, tetapi, yang menarik, meskipun saya memaksakan elemen ke kondisi ini dalam perangkat dev, tidak ada yang berubah. Namun, ketika saya beralih ke mengedit elemen (kursor berada di dalam tag), saya melihat bahwa: sebelum pseudo-elemen muncul di bar gaya. Tetapi saya tidak dapat melihatnya, karena untuk ini saya harus mengkliknya dengan mouse, yang berarti bahwa saya akan menghapus fokus dari tag, akibatnya fokus akan hilang dan, karenanya, pseudo-element: sebelumnya juga. Persis seperti anjing mengejar ekornya.
Dan kemudian saya menemukan debugging dan brickpoints. Artinya, kami melampirkan brickpoint pada elemen HTML untuk mengubah subtree dan memaksa fokus. Untung Muncul: sebelum dan dokumen macet. Anda dapat mempelajari segalanya dengan aman. Berikut ini adalah video singkat bagaimana itu:
Itu saja, cukup cepat masalahnya ditemukan dan diperbaiki.
PS kalau ada yang tertarik dengan editor seperti apa dalam video,
saya menulis tentang dia baru-baru ini .