מבוא
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, עליך להשתמש בתפריט הדפים בפינה השמאלית העליונה, ולבחור באפשרות Developer, Developer Tools (כלים למפתחים).
עכשיו, כשהכלים למפתחים פתוחים ומוכנים, נתחיל לחקור את האלמנטים בדף הבית של Google.
Elements
הכרטיסייה הראשונה ב'כלים למפתחים' היא 'רכיבים'. זהו החלון שלך למבנה של דף האינטרנט, שמוצג כפי שהדפדפן שלך רואה אותו.
גלישה ב-DOM
בדרך כלל, כשתצטרכו לזהות את קטע הקוד של ה-HTML בהיבט מסוים של הדף, היכנסו לכרטיסיות 'רכיבים'. לדוגמה, תוכלו לבדוק אם לתמונה יש מאפיין של מזהה HTML, ומה הערך של המאפיין הזה.
לפעמים הכרטיסייה 'רכיבים' היא דרך טובה יותר ל'הצגת מקור' של דף. בכרטיסייה Elements (רכיבים), ה-DOM של הדף יעוצב בצורה טובה כך שניתן יהיה לראות בו בקלות רכיבי HTML, את ישות האב ואת הצאצאים שלהם. לעיתים קרובות, בדפים שאתם מבקרים בהם יהיו מוקטנים או פשוט דפי HTML מכוערים, מה שמקשה עלינו לראות את מבנה הדף. הכרטיסייה 'רכיבים' היא הפתרון שלך להצגת המבנה הבסיסי האמיתי של הדף.
לדוגמה, זה הפלט מ'הצגת המקור' של דף הבית של Google.
קשה לקרוא את המקור שלמעלה מפני שהוא עבר אופטימיזציה ומוקטן. הפורמט טוב ללקוחות ולשרתים, אבל קשה למפתחים.
במקום זאת, כשרוצים לקרוא את מקור הדף, משתמשים בכרטיסייה 'רכיבים' כדי להציג היררכיית רכיבים מודגשת בתחביר.
הכרטיסייה Elements (רכיבים) מאפשרת גם לעיין, ליצור אינטראקציה ולפעמים גם לשנות את הסגנונות, המדדים, המאפיינים ו-Event Listeners של כל רכיב בדף.
גלישה בסגנונות
האופי הדירוג של CSS הופך את דפדפן הסגנונות בכרטיסייה 'רכיבים' לשימושי מאוד. לפעמים סגנונות מתכווצים אל עצמם ומוצגים רכיבים חזותיים לא רצויים. אם תכירו את כלל העיצוב שהדפדפן מחיל על הרכיב, תוכלו לנפות באגים בבעיה כזו.
לחיצה על רכיב כלשהו בכרטיסייה Elements (רכיבים) תציג את כל הסגנונות שצורפו לאלמנט הזה.
בצילום המסך שלמעלה תוכלו לראות את כל מאפייני הסגנון שהמערכת מחילה. לדוגמה, המרווח הפנימי מגיע ישירות ממאפיין הסגנון של הרכיב <img>. עם זאת, הרוחב והגובה מגיעים מהמאפיינים המקוריים שלהם. אפשר לראות שיש סגנונות שעברו בירושה גם מהתג <center>, מהתג <body> ועוד.
זה נהדר לראות את הסגנונות השונים ומאיפה הם מגיעים, אבל מומלץ גם לראות את סדרת הסגנונות הסופית לאחר החישוב והיישום שלה על הרכיב. אתם יכולים לראות את המוצר הסופי על ידי בחירה בתפריט 'סגנון מחשוב', כפי שמוצג בצילום המסך בהמשך.
עכשיו נציג בקצרה את התכונות האחרות שזמינות בכרטיסייה 'רכיבים'. נעסוק בנושא הזה בהרחבה במאמרים הבאים.
דגם קופסה
כדי לראות את מודל התיבה כפי שהוא מוחל על הרכיב שנבחר, בוחרים בתפריט 'מדדים':
מאפייני הרכיב
תוכלו לראות את כל המאפיינים של הרכיב, כפי שהם יוצגו ב-JavaScript וב-DOM. לשם כך, לחצו על התפריט 'מאפיינים':
פונקציות event listener
לסיום, אפשר אפילו לראות את ה-event listeners שמצורפים אל הרכיב, או את הבועה שדרכה, דרך התפריט 'האזנה לאירועים':
סיכום
הכרטיסייה 'רכיבים' מציעה פונקציונליות רבה, ומאמרים עתידיים יתעמקו יותר בתפריטים הנפרדים.
עליך להשתמש בכרטיסייה 'רכיבים' כשרוצים לראות איך הדף נראה בדפדפן עצמו. אפשר למצוא תשובות לבעיות נפוצות כמו "איך מחושב הסגנון הזה?" או "אילו תגי HTML יצרו את הרכיב הזה?" דרך הכרטיסייה 'רכיבים'.
הכרטיסייה 'רכיבים' היא כמו 'תצוגה מפורטת של מקור', ומקבלים תמונה ברורה מאוד של הדף שלכם.
לאחר שחוקרים את הדף, ייתכן שתהיתם איך HTML, CSS ותמונות הגיעו לשם מלכתחילה. הכרטיסייה 'משאבים', המתוארת בהמשך, מציגה את האופן שבו דפדפן הלקוח ושרת האינטרנט מתקשרים ביניהם כדי להעביר את המשאבים האלו.
מקורות מידע
לאחר שהאפליקציה תפעל, השלב הבא הוא אופטימיזציה של ביצועי הרשת ורוחב הפס. המטרה שלכם היא שההעברה של האפליקציות שלכם משרת ללקוח מהירה ויעילה ככל האפשר. המשתמשים יודו לכם על הטעינה המהירה של הדפים, אתם תחסוךו כסף על משאבי רוחב פס ושרתים, וגם תקבלו דירוג גבוה יותר בתוצאות החיפוש של Google (שעכשיו מביא בחשבון את מהירות האתר).
הכרטיסייה 'משאבים' בקטע 'כלים למפתחים' היא החלון לתקשורת בין שרת האינטרנט לדפדפן הלקוח. ניתן לראות את כל המשאבים שהדפדפן מבקש (זה תמיד מפתיע מאוד!), כמה זמן נדרש כדי לקבל אותם מהשרת, וכמה רוחב פס נמצא בשימוש במהלך ההעברה.
באופן אירוני, הפעלת הכרטיסייה 'משאבים' משפיעה על ביצועי הטעינה של דפים, ולכן היא מושבתת כברירת מחדל. בפעם הראשונה שתיגשו לפונקציונליות, תצטרכו להפעיל אותה עבור הדף שבו אתם צופים.
מומלץ להשאיר את ברירת המחדל 'הפעלה רק בסשן הזה' מסומנת, כי אינך רוצה להיפגע בצורה לא רצויה. אחרי שלוחצים על 'הפעלת מעקב אחרי משאבים', הדף ייטען מחדש, והכלים למפתחים יעקבו אחר המשאבים שנשלחו מהשרת ויציגו אותם.
בצילום המסך הבא מוצגים המשאבים הנדרשים ונטענו עבור דף הבית של Google.
במסך הזה יש הרבה מידע, לכן נעבור על כל חלק בנפרד.
פעולת ברירת המחדל היא להראות לכם כמה זמן נדרש כדי לבקש ולטעון את כל המשאבים של הדף. גלילה למטה ברשימת המשאבים עשויה להפתיע אתכם, מכיוון שלא תמיד תוכלו לדעת כמה בקשות נפרדות נשלחות על ידי הלקוח. מספר רב של בקשות מהלקוח יכול להשפיע באופן משמעותי על הביצועים. השלב הראשון לאופטימיזציה ולצמצום של המשאבים בפועל הוא השגת החשיפה של המידע המבוקש.
אם אתם רוצים לראות רק תמונות או גיליונות סגנונות, תוכלו לסנן את סוג המשאב באמצעות התפריט שמופיע ישירות בחלון הכרטיסייה הראשי.
תוכלו לראות גם את הסדר שבו מבקשים את המשאבים. באמצעות תצוגת ציר הזמן, תוכלו להבין טוב יותר למה רכיבים מסוימים בדף מופיעים מאוחר יותר מאשר רכיבים אחרים.
אחרי שתקבלו סקירה כללית של כל המשאבים המבוקשים והאופן שבו הם מכילים את כל ציר הזמן של הבקשה, כדאי להציג פירוט של המשאבים הספציפיים.
אם שמתם לב שנשלחה בקשה לחלק מהמשאבים בכל גישה לדף, זה סימן לכך שכותרות השמירה במטמון לא מוגדרות כראוי. כדי להציג את כל הכותרות של משאב מסוים, לוחצים על המשאב ברשימה שמימין.
משתמשים בתצוגת הכותרות כדי לוודא שקוד תגובת ה-HTTP הצפוי מוגדר ושהכותרות המתאימות סופקו. לדוגמה, אם המשאב משתנה לעיתים רחוקות או לא משתנה אף פעם, השרת צריך להגדיר את הכותרת 'התוקף פג' לתקופה בעתיד הרחוק. כך הדפדפן יציין שאין לבקש שוב את המשאב עד לתאריך הזה. הפעולה הזו מפחיתה את כמות חיבורי ה-HTTP שנדרשים לדף שלכם, וכך האתר שלכם יהיה מהיר יותר.
סיכום
הכרטיסייה 'משאבים' כוללת עוד המון נושאים, שנעסוק בהם במאמר עתידי.
בכרטיסייה 'משאבים' אפשר לראות את הדרכים שבהן דפדפן הלקוח מתקשר עם שרת האינטרנט. על סמך המידע הזה, כולל זמן הבקשה, גודל הבקשה והזמנת הבקשה, אפשר לבצע אופטימיזציות חכמות להפחתת העומס על השרת, לעלויות, להגביר את המהירות ולשפר את חוויית המשתמש.
המהירות חשובה מאוד לאתר, למשתמשים ולמנועי החיפוש. לאחר צמצום מספר המשאבים והגודל שלהם וביצוע שיחות HTTP המתאימות, השלב הבא הוא לחקור ולבצע אופטימיזציה של הסקריפטים שרצים בדף. למרבה המזל, הכרטיסייה 'סקריפטים', שבה דיברנו בהמשך, עושה בדיוק את זה.
מקורות נוספים
כדי לקבל מידע נוסף על הכלים למפתחים, מומלץ לבצע את הפעולות הבאות:
וכמובן, המשך לבקר ב-html5rocks.com בחלק 2 של מאמר זה, יחד עם עוד הרבה תוכן מעולה של HTML5 ו-Chrome.