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