מבט לתוך אתרי אינטרנט. עבור מפתחי אינטרנט

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

קודם כל, אנחנו צריכים להתקין את Firebug.

Firebug

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

לאחר מכן, באפשרותך להציג את Firebug באחת מהדרכים הבאות: בצע את התפריט הבא כלים> מפתחי אינטרנט> Firebug, לחץ לחיצה ימנית על דף האינטרנט ובחר “בדיקת אלמנט עם Firebug”.

לחלופין, אתה יכול למצוא סמל Firebug ב- Firefox ולחץ על זה, זה יציג את החלון אש;

Firebug הוא די זהה כלים למפתחים של Chrome. יש לו פאנל כדי לראות את מבנה HTML ואת סגנונות, וגם לוח מסוף לראות את השגיאות, האזהרות והיומנים. אבל, יש לי עוד כמה טיפים בתקווה כי אתה עשוי למצוא שימושי.

התאמת גודל תיבת

אלמנט HTML מורכב עם מודל תיבת CSS המורכבת ממדד השוליים, הריפוד והאובייקט (רוחב / גובה). יש פעמים שבהן ייתכן שנצטרך לשנות תכונות אלה. במקרה זה, אתה יכול לבחור אחד האלמנטים שאתה רוצה לשנות את זה, ואז ללכת אל פריסה פאנל.

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

סגנונות ממוחשבים

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

בדיקת משפחת גופן (בדרך הקלה)

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

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

ניתוח ביצועים

ייתכן שזו מהירות, אבל מהירות האתר היא כעת אחד הפרמטרים של Google (אלגוריתם) בקביעת איכות האתר; האתר נטען מהר יותר נחשב מפותח היטב מדורגת גבוה יותר במונחים של תוכן. אז מהירות היא לא משהו שיש להתעלם.

פאנל נטו

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

לאחר מכן תוכל למיין את בקשת ה- HTTP בסוג שלהם כגון HTML, CSS ותמונות.

Yslow!

יתר על כן, ניתן גם להתקין YSlow, הרחבה עבור Firebug מיאהו !. לאחר הפעלתו, תמצאו פאנל נוסף הנקרא באופן אקטיבי Yslow!.

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

מהירות דף

לחלופין, תוכל גם להתקין את 'מהירות דף' מ- Google. דומה ל Yslow!, זה בודק ביצועי מהירות האתר, אם כי התוצאה הבדיקה עשויה להיות שונה במקצת. דוגמה זו מציגה את אותו דף אינטרנט קלע 82 לפי מהירות דף.

כלי מפתח אינטרנט

Web Developers Tools הוא ללא ספק עבור מפתחי אינטרנט ויש לו חבורה של תכונות ארוז בסרגל הכלים הזה. אבל זה אחד למטה הוא אחד המועדפים שלי.

בדיקת תמונה

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

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

בנוסף, דוגמה זו מציגה כיצד אנו מציגים את מאפיין התמונה ואת גודל קובץ התמונה בו זמנית:

כלים מובנים ב- Firefox

בגרסאות האחרונות, פיירפוקס שיפרה באופן משמעותי את התכונות המובנות שלה עבור מפתחי אתרים, חלקם:

Native לפקח על אלמנט

יליד זה בדוק את האלמנט מ - Firefox עשוי להיראות דומה “בדוק אלמנט ב Firebug”, אבל זה למעשה פועל בדרכים שונות.

הפעם, אני לא אעבור תכונה זו עוד יותר, כפי שהוא זהה במהותו Firebug HTML ו- CSS פאנל, אם כי עם הבדל פריסה ועיצוב. אבל, יש תכונה אחת ייחודית שראוי לנסות, את תצוגת תלת ממד.

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

אני לא משתמש בו לעתים קרובות ככל תכונות אחרות, אבל זה די תכונה חדשנית מ Mozilla אני מודה, ובוודאי מאוד שימושי במצבים מסוימים.

תצוגת עיצוב אתרים

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

תצוגה זו זמינה מתפריט זה: כלים> מפתח אינטרנט> תצוגת עיצוב אינטרנט. וככה זה נראה כמו נוף.

עורך סגנון

לבסוף, אם אתה עובד עם CSS לעתים קרובות, סביר להניח להתאהב עם תכונה זו. מאז הגירסה של 11, Firefox הוסיף עורך סגנון כלי הפיתוח שלה.

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

עורך הסגנון זמין מהתפריט הבא: כלים> מפתח אינטרנט> עורך סגנון.

מחשבה סופית

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

באילו תכונות אתה משתמש לעתים קרובות? תוכל לשתף את המחשבות שלך בתיבת ההערות שבהמשך.