מפתח Debug אלמנטים בדף שלך עם שורה אחת של קוד

כמה פעמים נאבקת למצוא בעיה אחת ספציפית להתעסק עם פריסת ה- CSS שלך? מתסגירת תגים חסרים לאחים מקוננים בצורה לא נכונה, בעיות CSS הן פרוטה של ​​תריסר. ועם זה הבאגים פריסת CSS, התהליך פשוט יש הרבה יותר קל.

זה שורה אחת של קוד יהיה לחצות את DOM ו מתאר כל אלמנט עם צבע שונה. בדרך זו אתה יכול לדמיין טוב יותר איך CSS שלך עובד (או לא עובד) ו במהירות במקום אזורים בעייתיים.

GitHub מאפשר למפתחים לשמור קצת סיביות של קוד שנקרא גיסטים. כל אלה הם קוד פתוח ללא תשלום שמור לשימוש שלך. לכן הבאגים CSS זה כל כך שימושי. הוא משלב את העוצמה המודרנית של Chrome DevTools עם ה הפשטות של סימניות הדפדפן.

כדי להשתמש בקוד זה, עליך תחילה להעתיק את הגרסה שאתה אוהב את הטוב ביותר בדף Gist. אז אתה הדבק את הקוד לתוך חלון הטרמינל שלך תריץ את זה. אתה צריך בסופו של דבר עם תוצאה כזאתYou

עכשיו, זה אפשרי שמור את הקוד הזה כסימניה בסרגל הכלים של הדפדפן. אבל אם אתה משתמש Chrome אתה יכול שמור את קוד JS זה כקטע קוד אשר הרבה יותר קל לרוץ.

קטע קוד זה יכול להיות נזכר שוב ושוב בלחיצת כפתור. אתה יכול לנתח כל דף, מלא בקווים אלה CSS צבעוניים, עבור DOM אלמנטים של הורים וילדים כאחד.

עם זאת, אינך אמור להרגיש מוגבל רק ל- Chrome. קטע זה עובד עבור כל הדפדפנים העיקריים, כולל Firefox, Safari, Opera ו- Internet Explorer.

וגם עבור מישהו סקרן ללמוד איך זה עובד, אתה יכול לבדוק את הגרסה המפורטת עם הערות עבור כל שורה של קוד.

זה Gist מלא תגובות משתמשים קשורות ו עדכונים ממפתחים אחרים עוזר להפוך אותו קטן ויעיל יותר. אבל במצב הנוכחי שלה, זו אחת הדרכים הפשוטות ביותר לנפות כל DOM עם שורה אחת של קוד.