מבוא
Google Chrome הוא דפדפן אינטרנט עשיר וחזק, והוא מוביל את האפשרות להשתמש באפליקציות באינטרנט. Google השקיעה מאמצים רבים כדי לספק למשתמשי הקצה חוויית גלישה מהירה ויציבה מאוד, עם שפע תכונות. Google גם הבטיחה שמפתחים כמוך ייהנו מחוויה מעולה עם Chrome. הכלים למפתחים, הארוזים בחבילה וזמינים ב-Chrome וב-Safari, מאפשרים למפתחי אתרים ולמתכנתים גישה עמוקה אל הרכיבים הפנימיים של הדפדפן ושל אפליקציית האינטרנט שלהם.
הכלים למפתחים הם חלק מפרויקט הקוד הפתוח Webkit. רוב הדיון במאמר זה חל גם על Google Chrome וגם על Safari. עם זאת, צילומי המסך צולמו באמצעות Google Chrome 6, לכן יכול להיות שיהיו הבדלים קלים בדפדפן.
במאמר הזה נצא לסיור סקירה כללית של הכלים למפתחים ונציין את התכונות הפופולריות והשימושיות ביותר של הכלים. קהל היעד שלנו הוא מפתחי אתרים שלא הכירו את הכלים למפתחים, או שעדיין לא בדקו אותם. עם זאת, אנחנו בטוחים שגם אם אתם מפתחי אתרים מנוסים, תקבלו טיפ או שניים.
אם המופע של הכלים למפתחים לא תואם בדיוק לצילומי המסך שמופיעים במאמר זה, מומלץ לשדרג ל-5 על מנת שתוכלו לעקוב אחר התהליך ולקבל גישה לכל התכונות המתוארות כאן.
סקירה כללית
באופן כללי, תצוגה 'כלים למפתחים' כוללת שמונה קבוצות עיקריות של כלים, והיכולות מתרחבות בכל גרסה. ב-Chrome 5 יש עכשיו רכיבים, משאבים, סקריפטים, ציר זמן, פרופילים, אחסון, ביקורות ומסוף.
Elements
כלי הרכיבים מאפשר לכם לראות את דף האינטרנט כמו שהדפדפן רואה אותו. כלומר, באמצעות הכלי 'רכיבים', תוכלו לראות את ה-HTML הגולמי, סגנונות CSS גולמיים, את מודל אובייקטים של המסמך ולבצע שינויים בכל אחד מהם בזמן אמת.
משאבים
השתמש בכלי המשאבים כדי ללמוד אילו רכיבים דף האינטרנט או האפליקציה שלך מבקשים משרתי אינטרנט, כמה זמן נדרש לבקשות אלה ומה רוחב הפס הדרוש. אפשר גם להציג את בקשת ה-HTTP ואת כותרות התגובה של כל אחד מהמשאבים. כלי המשאבים הוא מושלם כדי לעזור לך להאיץ את זמני הטעינה של דפים.
סקריפטים
כדי לקשר בין ה-JavaScript של דף מסוים, עליכם להשתמש בכלי הסקריפטים. כאן אפשר למצוא רשימת סקריפטים שנדרשים על ידי הדף וגם כלי לניפוי באגים מלא לסקריפטים מוצגים. תוכלו אפילו לשנות את ה-JavaScript בזמן אמת!
ציר הזמן
לתזמון מתקדם ולניתוח מהירות, הכלי 'ציר הזמן' מאפשר לראות לעומק את הפעילויות השונות מאחורי הקלעים ב-Chrome. אתם יכולים לראות כמה זמן לוקח לדפדפן לטפל באירועי DOM, לעבד את פריסות הדפים ולצבוע את החלון.
פרופילים
הכלי 'פרופילים' עוזר לך לתעד ולנתח את הביצועים של סקריפטים של JavaScript. לדוגמה, אתם יכולים לגלות לאילו פונקציות דרושות הכי הרבה זמן לבצע, ולהתמקד בקביעת המיקום המדויק לביצוע אופטימיזציה.
אחסון
ליישומי אינטרנט מודרניים נדרשת עמידות רבה יותר מאשר קובצי cookie בלבד, וכלי האחסון עוזר לך לעקוב אחר האחסון המקומי בדפדפן, לבדוק בו את הנתונים ולנפות באגים. כלי זה יכול להציג נתונים המאוחסנים במסדי נתונים מקומיים, אחסון מקומי, אחסון של סשנים וקובצי Cookie, ולבצע שאילתות לגביהם.
בדיקה
כלי הביקורת דומה ליועץ משלך לאופטימיזציה של אתרים שיושב לצידך. הכלי הזה יכול לנתח דף בזמן שהוא נטען, ולספק הצעות ואופטימיזציות לקיצור זמן הטעינה של הדף ולהגברת הרספונסיביות (והאמיתית) של הדף.
המסוף
אחרון אחרון חביב, 'הכלים למפתחים' מציעים מסוף מומלץ שלם. מהמסוף, אפשר להזין JavaScript שרירותי ולבצע באופן פרוגרמטי אינטראקציה עם הדף שלך.
הפעלה
קל להפעיל את הכלים למפתחים כשאתם נמצאים ב-Chrome.
בכל מערכת הפעלה, אפשר פשוט ללחוץ לחיצה ימנית על רכיב כלשהו בדף ולבחור באפשרות 'בדיקת רכיב' מתפריט ההקשר. הפעולה הזו תפתח את הכלים למפתחים ותתעמק ישירות לרכיב שעליו לחצת.
כדי לראות זאת בפעולה, אפשר להיכנס לאתר http://www.google.com בדפדפן Chrome. לחץ לחיצה ימנית על הלוגו של Google, ותראה את האפשרויות הבאות:
בחירה באפשרות 'בדיקת רכיב' תציג את הכלים למפתחים, שאמורים להיראות כך:
שימו לב איך הכלים למפתחים נפתחו בכרטיסייה Elements (רכיבים), והוצגו באופן אוטומטי פירוט והדגשה של התג <img> של הלוגו של Google. זה שימושי מאוד כשרוצים לבדוק איזה HTML יצר רכיב מסוים בדף.
תוכל גם לפתוח את הכלים למפתחים באמצעות מקש קיצור פשוט. בהתאם למערכת ההפעלה שלך, נסה את הפעולות הבאות:
- ב-Windows וב-Linux, בוחרים במקשים
Control-Shift-J. - ב-Mac, מקישים על
Command-Option-J.
לבסוף, תוכלו לבחור לפתוח את הכלים מתפריט הדפדפן הראשי.
ב-Mac, ומסרגל התפריטים הראשי של היישום, בחר 'תצוגה', 'מפתח', 'כלים למפתחים'.
במחשב Windows, עליך להשתמש בתפריט הדפים שבפינה השמאלית העליונה ולבחור באפשרות 'מפתח', 'כלים למפתחים'.
עכשיו כשהכלים למפתחים פתוחים ומוכנים, נתחיל בבחינה של הרכיבים בדף הבית של Google.
Elements
הכרטיסייה הראשונה בכלים למפתחים היא 'רכיבים'. זהו החלון שלך למבנה של דף האינטרנט, כפי שהוא מוצג בדפדפן.
דפדוף ב-DOM
לעתים קרובות תיכנסו לכרטיסיות 'רכיבים' כאשר תצטרכו לזהות את קטע ה-HTML של היבט מסוים של הדף. לדוגמה, יכול להיות שתרצו לשאול אם לתמונה יש מאפיין מזהה HTML, ומה הערך של המאפיין הזה.
הכרטיסייה 'רכיבים' היא לפעמים דרך טובה יותר 'להציג מקור' של דף. בכרטיסייה Elements (רכיבים), ה-DOM של הדף יהיה מעוצב כהלכה, ומציג בקלות רכיבי HTML, את ישות האב שלהם ואת הצאצאים שלהם. לעיתים קרובות מדי, הדפים שבהם אתם מבקרים יהיו בפורמט HTML מוקטן או פשוט מכוערים, באופן שמקשה עלינו לראות את המבנה של הדף. הכרטיסייה 'רכיבים' היא הפתרון שלכם להצגת המבנה הבסיסי האמיתי של הדף.
לדוגמה, זהו הפלט מתוך "view source" (הצגת מקור) של דף הבית של Google.
קשה לקרוא את המקור שלמעלה מפני שהוא עבר אופטימיזציה ומוקטן. הפורמט הזה טוב ללקוחות ולשרתים, אבל קשה למפתחים!
במקום זאת, כשרוצים לקרוא את המקור של דף, משתמשים בכרטיסייה 'רכיבים' כדי להציג היררכיית רכיבים מודפסת ומודגשת בתחביר.
הכרטיסייה 'רכיבים' גם מאפשרת לכם לעיין בסגנונות, במדדים, במאפיינים ובפונקציות event listener של רכיבים שונים בדף, לבצע פעולות ולפעמים גם לשנות אותם.
עיון בסגנונות
האופי המדורג של CSS הופך את דפדפן הסגנונות בכרטיסייה 'רכיבים' לשימושי מאוד. לפעמים הסגנונות מתכווצים לעצמם ומופיעים רכיבים חזותיים לא רצויים. אם תדעו איזה כלל עיצוב הדפדפן מחיל על הרכיב, תוכלו לנפות באגים הקשורים לבעיה הזו.
לחיצה על רכיב כלשהו בכרטיסייה Elements תציג את כל הסגנונות שמצורפים לרכיב זה.
בצילום המסך שלמעלה תראו שאנחנו יכולים לספר על כל מאפייני הסגנון שחלים. לדוגמה, המרווח הפנימי מגיע ישירות ממאפיין הסגנון של הרכיב <img>. עם זאת, הרוחב והגובה מגיעים מהמאפיינים המקוריים שלהם בהתאמה. מעניין לגלות שיש סגנונות שעברו בירושה גם מהתג <center>, מהתג <body> ומתגים אחרים.
אמנם זה נהדר לראות את הסגנונות הנפרדים ואת המקור שלהם, אבל כדאי מאוד גם לראות את הסט הסופי של הסגנונות אחרי שהיא מחשבת ומיושמת על הרכיב. כדי לראות את המוצר הסופי יש לבחור בתפריט 'סגנון המחושב', כמו בצילום המסך שלמטה.
לאחר מכן נציג בקצרה את התכונות האחרות שכלולות בכרטיסייה 'רכיבים'. במאמרים הבאים נעסוק בנושאים הבאים בהרחבה.
דגם הקופסה
ניתן לראות את מודל התיבה כפי שהוא מוחל על הרכיב שנבחר על ידי בחירה בתפריט 'מדדים':
מאפייני הרכיב
תוכלו לראות את כל המאפיינים של הרכיב, מאחר ש-JavaScript ו-DOM יראה אותו, על ידי בחירה בתפריט 'מאפיינים':
פונקציות מסוג Event Listener
ולבסוף, תוכלו אפילו לראות את האירוע listener שקשור לרכיב, או כזה שגולש בבועות דרך התפריט Event Listeners:
סיכום
הכרטיסייה 'רכיבים' מציעה פונקציות רבות, ומאמרים עתידיים יתעמקו יותר בתפריטים השונים.
יש להשתמש בכרטיסייה 'רכיבים' כשרוצים לראות איך הדף נראה לדפדפן עצמו. בעיות נפוצות, כגון "איך מחושב הסגנון הזה?" או "אילו תגי HTML יצרו את הרכיב הזה?", אפשר לפתור אותן במהירות ובקלות באמצעות הכרטיסייה 'רכיבים'.
חשוב על כרטיסיית הרכיבים כעל "מקור תצוגה" כללי, וקבל נראות חדה מאוד לדף שלך.
לאחר שבדקת את הדף, ייתכן שתהית כיצד HTML , CSS ותמונות הגיעו לשם מלכתחילה. הכרטיסייה 'משאבים', המתוארת בהמשך, מראה כיצד דפדפן הלקוח ושרת האינטרנט מתקשרים כדי לשלוח את המשאבים האלה.
משאבים
לאחר שהיישום שלך יפעל, השלב הבא יהיה אופטימיזציה של הביצועים של הרשת ורוחב הפס. חשוב לוודא שהעברת האפליקציה שלכם מהשרת ללקוח תהיה מהירה ויעילה ככל האפשר. המשתמשים יודו לכם על הטעינה המהירה של הדפים, תחסכו כסף ברוחב הפס ובמשאבי השרת וגם תקבלו ניקוד טוב יותר בדירוג תוצאות החיפוש של Google (שמביא עכשיו בחשבון את מהירות האתר).
הכרטיסייה 'משאבים' ב'כלים למפתחים' היא חלון התקשורת בין שרת האינטרנט ודפדפן הלקוח. יש לך אפשרות לראות את כל המשאבים המבוקשים על ידי הדפדפן (וזה תמיד מפתיע!), כמה זמן נדרש כדי לקבל אותם מהשרת ומהו רוחב הפס שנעשה בו שימוש במהלך ההעברה.
באופן אירוני, הפעלת הכרטיסייה 'משאבים' משפיעה על ביצועי טעינת הדף, כך שהיא מושבתת כברירת מחדל. בפעם הראשונה שתיכנסו לפונקציונליות, תצטרכו להפעיל אותה בדף שבו אתם צופים.
מומלץ להשאיר את האפשרות 'הפעלה רק בסשן הזה' בברירת המחדל, כי אינך רוצה לגרום לפגיעה קטנה מדי בביצועים. לאחר לחיצה על "הפעלת מעקב אחר משאבים", הדף ייטען מחדש, והכלים למפתחים יעקבו אחר המשאבים שנשלחו מהשרת ויציגו אותם.
בצילום המסך הבא מוצגים המשאבים הנדרשים, שנטענות עבור דף הבית של Google.
יש הרבה מידע במסך הזה, אז נעבור לחלקים נפרדים.
כברירת מחדל, התנהגות ברירת המחדל היא מראה כמה זמן לקח לבקשה וטעינה של כל המשאבים עבור הדף. גלילה מטה ברשימת המשאבים עשויה להפתיע אתכם, כי אולי אתם לא יודעים כמה בקשות שונות נשלחות על ידי הלקוח. מספר גבוה של בקשות מהלקוח יכול להשפיע באופן משמעותי על הביצועים. השלב הראשון לאופטימיזציה ולצמצום בסופו של דבר מבחינת המשאבים הוא היכולת להבין מה בדיוק צריך.
אם אתם מעוניינים רק בתמונות או בגיליונות סגנונות, תוכלו לסנן את סוג המשאב באמצעות התפריט שמופיע מתחת לחלון הכרטיסייה הראשי.
בנוסף, נסביר את הסדר שבו נשלחו בקשות למשאבים. השימוש בתצוגת ציר הזמן יכול לעזור לכם להבין טוב יותר למה רכיבים מסוימים בדף מופיעים בשלב מאוחר יותר מאחרים.
אחרי שתקבלו סקירה כללית על כל המשאבים הנדרשים והאופן שבו הם מרכיבים את כל ציר הזמן של הבקשה, תוכלו להציג פירוט של המשאבים השונים.
אם שמתם לב שמשתמשים מסוימים מבקשים בכל פעם שאתם ניגשים לדף, זה סימן לכך שכותרות השמירה במטמון לא מוגדרות כראוי. כדי להציג את כל הכותרות של משאב מסוים, לוחצים על המשאב ברשימה שבצד ימין.
שימוש בתצוגת הכותרות כדי לוודא שקוד תגובת ה-HTTP הצפוי מוגדר ושהכותרות המתאימות יסופקו. לדוגמה, אם המשאב משתנה לעתים רחוקות או לעולם לא משתנה, על השרת שלך להגדיר את הכותרת 'בתוקף' לעתיד. פעולה זו תודיע לדפדפן שאין לבקש שוב את המשאב עד לתאריך הזה. הפעולה הזו מפחיתה את כמות חיבורי ה-HTTP שנדרשים לדף, וכתוצאה מכך מאיצה את האתר.
סיכום
הכרטיסייה 'משאבים' כוללת מידע רב נוסף, ונעסוק בה במאמר עתידי.
השתמש בכרטיסייה 'משאבים' כדי לראות כיצד דפדפן הלקוח שלך מתקשר עם שרת האינטרנט. על סמך המידע הזה, כולל זמן הבקשה, גודל הבקשה והזמנת הבקשות, תוכלו לבצע אופטימיזציות חכמות כדי להפחית את העומס על השרת ואת העלויות שלו, להגביר את המהירות ולשפר את חוויית המשתמש.
המהירות חשובה מאוד לאתר, למשתמשים ולמנועי החיפוש שלך. לאחר צמצום המספר והגודל של המשאבים, ולאחר מכן ביצוע שיחות ה-HTTP המתאימות, השלב הבא הוא לחקור את הסקריפטים שפועלים בדף ולבצע אופטימיזציה שלהם. למרבה המזל, הכרטיסייה 'סקריפטים', שעליה נדון בשלב הבא, עושה בדיוק את זה.
מקורות נוספים
למידע נוסף על הכלים למפתחים, מומלץ:
וכמובן, המשך לעקוב אחר html5rocks.com בחלק 2 של מאמר זה, יחד עם המון תוכן HTML5 ו-Chrome נהדרים אחרים.