כלי הפיתוח ל-Chrome הוא קבוצת כלים למפתחי אתרים שמובנית ישירות בדפדפן Google Chrome. כלי הפיתוח יכולים לעזור לכם לערוך דפים בזמן אמת ולאבחן בעיות במהירות, מה שבסופו של דבר עוזר לכם לבנות אתרים טובים יותר, מהר יותר.
בסרטון אפשר לראות הדגמות בזמן אמת של תהליכי העבודה העיקריים של כלי הפיתוח, כולל ניפוי באגים ב-CSS, יצירת אב טיפוס של CSS, ניפוי באגים ב-JavaScript וניתוח ביצועי עומס.
פתיחת כלי הפיתוח
יש הרבה דרכים לפתוח את כלי הפיתוח, כי משתמשים שונים רוצים גישה מהירה לחלקים שונים בממשק המשתמש של כלי הפיתוח.
- על מנת לעבוד עם ה-DOM או ה-CSS, לוחצים לחיצה ימנית על רכיב בדף ובוחרים באפשרות Inspect (בדיקה) כדי לעבור לחלונית Elements. לחלופין, אפשר להקיש על Command+Option+C (Mac) או על Control+Shift+C (Windows, Linux, ChromeOS).
- כדי לראות הודעות שנרשמו ביומן או להריץ JavaScript, לוחצים על Command+Option+J (Mac) או על Control+Shift+J (Windows, Linux, ChromeOS) כדי לעבור ישירות לחלונית Console.
פרטים נוספים ותהליכי עבודה זמינים במאמר פתיחת כלי הפיתוח ל-Chrome.
תחילת העבודה
אם אתם מפתחי אתרים מנוסים, הנה נקודות ההתחלה המומלצות כדי ללמוד איך כלי הפיתוח יכולים לשפר את הפרודוקטיביות שלכם:
- הצגה ושינוי של ה-DOM
- הצגה ושינוי של שירות CSS
- ניפוי באגים ב-JavaScript
- הצגת הודעות והרצת JavaScript במסוף
- אופטימיזציה של מהירות האתר
- בדיקת הפעילות ברשת
לגלות את כלי הפיתוח
ממשק המשתמש של כלי הפיתוח יכול להיות קצת מסובך... יש כל כך הרבה כרטיסיות! אבל אם תקדישו זמן כדי להכיר כל כרטיסייה ולהבין מה אפשר לעשות, יכול להיות שתגלו שכלי הפיתוח יכולים לשפר משמעותית את הפרודוקטיביות שלכם.
מצב המכשיר (Device Mode)
הדמיה של מכשירים ניידים.
חלונית הרכיבים
הצגה ושינוי של ה-DOM וה-CSS.
- תחילת העבודה בהצגה ושינוי של ה-DOM
- איך מתחילים להציג ולשנות שירות CSS
- עריכת שירות ה-CSS
- עריכת ה-DOM
- חיפוש שירות CSS לא תקין, בוטל, לא פעיל או בשירות CSS אחר
- זיהוי של שיפורים אפשריים בשירות ה-CSS
- אמולציה של עיצובים בהירים/כהים, ניגודיות ותכונות מדיה אחרות של CSS
- חיפוש שירות CSS שאינו בשימוש
- בדיקת אנימציות
חלונית המסוף
אפשר להציג הודעות ולהפעיל JavaScript מהמסוף.
החלונית 'מקורות'
ניפוי באגים ב-JavaScript, שמירת שינויים שבוצעו בכלי הפיתוח בטעינות מחדש של דפים, שמירה והרצה של קטעי קוד של JavaScript, ושמירת השינויים שמבצעים בכלי הפיתוח במקורות מקומיים.
- תחילת העבודה עם ניפוי באגים ב-JavaScript
- השהיית הקוד עם נקודות עצירה (breakpoint)
- עריכה ושמירה של קבצים בסביבת עבודה
- הרצת קטעי קוד של JavaScript
- חומר עזר לניפוי באגים ב-JavaScript
- שינוי מקומי של תוכן מהאינטרנט וכותרות של תגובות HTTP
חלונית 'רשת'
הצגה וניפוי באגים של פעילות הרשת.
חלונית מכשיר ההקלטה
תיעוד, הפעלה מחדש ומדידה של זרימות המשתמשים.
- תיעוד, הפעלה מחדש ומדידה של זרימות המשתמשים
- התאמה אישית של מכשיר ההקלטה באמצעות תוספים
- הסבר על התכונות של מכשיר ההקלטה
חלונית ביצועים
מציאת דרכים לשיפור הביצועים בזמן הטעינה ובזמן הריצה.
חלונית זיכרון
איתור ותיקון של בעיות זיכרון שמשפיעות על ביצועי הדף, כמו דליפות זיכרון.
חלונית האפליקציה
בדיקה של כל המשאבים שנטענים, כולל מסדי נתונים של IndexedDB או של Web SQL, אחסון מקומי ואחסון של סשנים, קובצי cookie, מטמון האפליקציה, תמונות, גופנים וגיליונות סגנונות.
- ניפוי באגים ב-Progressive Web Apps
- הצגה ועריכה של האחסון המקומי
- הצגה, הוספה, עריכה ומחיקה של קובצי cookie
- הצגת מידע על גרסת המקור לניסיון
חלונית האבטחה
ניפוי באגים של בעיות בתוכן מעורב, בעיות באישורים ועוד.
מעורבות
שליחת דוחות על באגים ובקשות לתכונות באמצעות Crbug, כלי המעקב אחר באגים של צוות מהנדסי התוכנה.
אם אתם רוצים להודיע לנו על באג או בקשה להוספת תכונה, אבל אין לכם הרבה זמן, אתם יכולים לשלוח ציוץ אל @ChromeDevTools. אנחנו משיבים ושולחים הודעות מהחשבון באופן קבוע.
לקבלת עזרה בשימוש בכלי הפיתוח, Stack Overflow הוא הערוץ הטוב ביותר.
כדי לדווח על באגים או לשלוח בקשות להוספת תכונות במסמכי הפיתוח, צריך לפתוח בעיה ב-GitHub.
גם לכלי הפיתוח יש ערוץ Slack, אבל הצוות לא עוקב אחריו באופן עקבי.