المطور Debug عناصر DOM على صفحتك مع سطر واحد من التعليمات البرمجية

كم مرة ناضلت ل العثور على مشكلة واحدة محددة العبث تخطيط CSS الخاص بك؟ من علامات الإغلاق المفقودة إلى الأشقاء المتداخلين بشكل غير صحيح ، تعد مشكلات CSS عشرة سنتات. ومع هذا المصحح تخطيط CSS, العملية فقط حصلت أسهل كثيرا.

هذا سطر واحد من التعليمات البرمجية سوف اجتياز DOM و الخطوط العريضة لكل عنصر مع لون مختلف. بهذه الطريقة يمكنك تصور أفضل كيف تعمل CSS (أو لا تعمل) و بقعة بسرعة المناطق المشكلة.

جيثب يسمح للمطورين حفظ أجزاء صغيرة من التعليمات البرمجية دعا Gists. هذه كلها مفتوحة المصدر وخالية من حفظ للاستخدام الخاص بك. هذا هو السبب في أن مصحح أخطاء CSS مفيد جدًا. فهو يجمع بين براعة الحديثة من كروم DevTools مع ال بساطة bookmarklets المتصفح.

لاستخدام هذا الرمز ، يجب عليك أولاً انسخ الإصدار الذي تفضله من صفحة Gist. ثم أنت الصق هذا الرمز في النافذة الطرفية الخاصة بك و شغلها. يجب أن ينتهي مع نتيجة مثل هذا:

الآن ، من الممكن أن احفظ هذا الرمز كإشارة مرجعية في شريط أدوات المتصفح الخاص بك. ولكن إذا كنت من مستخدمي Chrome ، فيمكنك ذلك احفظ كود JS هذا كمقطع برمجي وهو أسهل بكثير لتشغيل.

يمكن أن يكون مقتطف الشفرة هذا يتذكر مرارا وتكرارا في نقرة زر واحدة. يمكنك تحليل كل صفحة, كاملة من هذه الخطوط العريضة الملونة CSS ، لعناصر DOM من الآباء والأمهات والأطفال على حد سواء.

ومع ذلك ، يجب ألا تشعر أنك مقصور على Chrome فقط. هذا مقتطف يعمل لجميع المتصفحات الرئيسية, بما في ذلك Firefox و Safari و Opera و Internet Explorer.

ولكل شخص فضولي لمعرفة كيف يعمل هذا ، يمكنك التحقق من نسخة مشروحة مع تعليقات لكل سطر من التعليمات البرمجية.

هذا Gist مليء تعليقات المستخدم ذات الصلة و تحديثات من المطورين الآخرين المساعدة في جعلها أصغر وأكثر كفاءة. ولكن في حالته الحالية ، هذه هي واحدة من أبسط الطرق ل تصحيح أي DOM مع سطر واحد من التعليمات البرمجية.