कोड की एक पंक्ति के साथ आपके पृष्ठ पर डेवलपर डीबग डोम तत्व

आपने कितनी बार संघर्ष किया है एक विशिष्ट समस्या का पता लगाएं अपने सीएसएस लेआउट को गड़बड़ाना? गायब होने वाले टैग से लेकर अनुचित रूप से नेस्टेड भाई-बहन तक, सीएसएस मुद्दे एक दर्जन से अधिक हैं। और साथ यह सीएसएस लेआउट डिबगर, बस प्रक्रिया बहुत आसान हो गया.

कोड की यह एक पंक्ति होगी डीओएम को पार करना तथा प्रत्येक तत्व की रूपरेखा एक अलग रंग के साथ। इस तरह आप कर सकते हैं बेहतर कल्पना आपका CSS कैसे काम कर रहा है (या काम नहीं कर रहा है) और जल्दी से समस्या क्षेत्रों को हाजिर.

GitHub डेवलपर्स को अनुमति देता है कोड के छोटे टुकड़े बचाओ Gists कहा जाता है। ये सभी खुले स्रोत हैं और मुफ्त हैं अपने खुद के उपयोग के लिए बचाओ. इसलिए यह CSS डीबगर इतना उपयोगी है। इसे जोड़ती है क्रोम DevTools की आधुनिक प्रगति उसके साथ ब्राउज़र बुकमार्कलेट की सादगी.

इस कोड का उपयोग करने के लिए, आपको पहले करना चाहिए आपको जो भी सबसे अच्छा लगे उसे कॉपी करें Gist पेज से। फिर आप उस कोड को पेस्ट करें अपने टर्मिनल विंडो में और चलाओ. आप के साथ समाप्त होना चाहिए इस तरह एक परिणाम:

अब, यह संभव है इस कोड को बुकमार्कलेट के रूप में सहेजें अपने ब्राउज़र टूलबार में। लेकिन अगर आप Chrome उपयोगकर्ता हैं तो आप कर सकते हैं इस JS कोड को कोड स्निपेट के रूप में सहेजें जिसे चलाना बहुत आसान है.

यह कोड स्निपेट हो सकता है बार-बार याद किया जाता है एक बटन के क्लिक पर। आप ऐसा कर सकते हैं हर पेज को पार्स करें, माता-पिता और बच्चों के डोम तत्वों के लिए इन रंगीन सीएसएस रूपरेखाओं से भरा हुआ है.

हालाँकि, आपको केवल क्रोम तक ही सीमित महसूस नहीं करना चाहिए। यह स्निपेट सभी प्रमुख ब्राउज़रों के लिए काम करता है, फ़ायरफ़ॉक्स, सफारी, ओपेरा, और इंटरनेट एक्सप्लोरर सहित.

और किसी के लिए यह जानने के लिए उत्सुक है कि यह कैसे काम करता है, आप इसे देख सकते हैं एनोटेट संस्करण कोड की प्रत्येक पंक्ति के लिए टिप्पणियों के साथ.

यह जिस्ट भरा हुआ है संबंधित उपयोगकर्ता टिप्पणियाँ तथा अन्य डेवलपर्स से अपडेट इसे छोटा और अधिक कुशल बनाने में मदद करना। लेकिन इसकी वर्तमान स्थिति में, यह सबसे सरल तरीकों में से एक है किसी भी DOM को कोड की एक लाइन के साथ डीबग करें.