מה חדש בכלי הפיתוח (Chrome 60)

שלום! התכונות החדשות והשינויים העיקריים שנוספו לכלי הפיתוח ב-Chrome 60 כוללים:

• חלונית חדשה של ביקורות, כולל בדיקות של אפליקציות מסוג Progressive Web App, ביצועים, נגישות ושיטות מומלצות.
• תגים של צד שלישי. כאן אפשר לראות אילו צדדים שלישיים שולחים בקשות לרשת, מתעדים ב-Console ומריצים JavaScript.
• המשך ל'כאן'. תנועת מגע חדשה שיכולה לזרז את תהליך העבודה של ניפוי הבאגים ב-JavaScript.
• ניפוי באגים צפוי ב-JavaScript אסינכרוני.
• תצוגות מקדימות של אובייקטים ב-Console.
• עדכונים בזמן אמת בכרטיסייה 'כיסוי'.
• תפריט חדש לבחירת הקשרים במסוף.
• אפשרויות פשוטות יותר להגבלת רוחב פס.
• דוחות של קריסות באופן אסינכרוני מופעלים כברירת מחדל.

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

תכונות חדשות

לוח ביקורות חדש, מבוסס על Lighthouse

החלונית Audits (ביקורות) מופעלת עכשיו על ידי Lighthouse. ‫Lighthouse מספקת קבוצה מקיפה של בדיקות למדידת האיכות של דפי האינטרנט שלכם.

הציונים בחלק העליון של Progressive Web App,‏ Performance,‏ Accessibility ו-Best Practices הם הציונים המצטברים שלכם בכל אחת מהקטגוריות האלה. בחלקים הבאים של הדוח מפורטים כל הבדיקות שקבעו את הניקוד שלכם. כדי לשפר את האיכות של דף האינטרנט, צריך לתקן את הבדיקות שנכשלו.

איור 1. דוח Lighthouse

כדי לבדוק דף:

1. לוחצים על הכרטיסייה ביקורות.
2. לוחצים על ביצוע בדיקה.
3. לוחצים על הפעלת הביקורת. ‫Lighthouse מגדיר את DevTools כדי לדמות מכשיר נייד, מריץ כמה בדיקות בדף ואז מציג את התוצאות בחלונית Audits.

‫Lighthouse בכנס Google I/O‏ 2017

כדי לקבל מידע נוסף על השילוב של Lighthouse בכלי הפיתוח, אפשר לצפות בהרצאה על כלי הפיתוח מ-Google I/O 2017 שמופיעה בהמשך.

תרומה ל-Lighthouse

Lighthouse הוא פרויקט קוד פתוח. כדי לקבל מידע נוסף על אופן הפעולה של Lighthouse ועל האופן שבו אפשר לתרום לו, אפשר לצפות בהרצאה על Lighthouse מ-Google I/O ‏2017 שמופיעה בהמשך.

יש לכם רעיון לביקורת ב-Lighthouse? פרסמו אותו כאן!

תגים של צד שלישי

אפשר להשתמש בתגים של צד שלישי כדי לקבל תובנות נוספות לגבי הישויות שמבצעות בקשות רשת בדף, מתעדות ביומן במסוף ומריצות JavaScript.

איור 2. העברת העכבר מעל תג של צד שלישי בחלונית הרשת

איור 3. העברת העכבר מעל תג של צד שלישי במסוף

כדי להפעיל תגים של צד שלישי:

1. פותחים את תפריט הפקודות.
2. מריצים את הפקודה Show third party badges.

משתמשים באפשרות Group by product (קיבוץ לפי מוצר) בכרטיסיות Call Tree (עץ השיחות) ו-Bottom-Up (מלמטה למעלה) כדי לקבץ את פעילות ההקלטה של הביצועים לפי ישויות הצד השלישי שגרמו לפעילויות. במאמר איך מתחילים לנתח את הביצועים בזמן ריצה מוסבר איך לנתח את הביצועים באמצעות כלי הפיתוח.

איור 4. קיבוץ לפי מוצר בכרטיסייה מלמטה למעלה

תנועה חדשה להמשך הצפייה מכאן

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

כשמבצעים מעבר שלב אחר שלב בקוד, לוחצים לחיצה ארוכה על Command (ב-Mac) או על Control (ב-Windows או ב-Linux) ואז לוחצים כדי להמשיך לשורת הקוד הזו. כלי DevTools מדגיש בכחול את היעדים שאפשר לעבור אליהם.

איור 5. המשך ל'כאן'

במאמר תחילת העבודה עם ניפוי באגים ב-JavaScript מוסבר על ניפוי באגים בכלי הפיתוח.

כניסה לעולם האסינכרוני

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

התנועה החדשה להמשך מכאן פועלת גם עם קוד אסינכרוני. כשלוחצים לחיצה ארוכה על Command (ב-Mac) או על Control (ב-Windows וב-Linux), כלי הפיתוח מדגיש בירוק יעדים אסינכרוניים שאפשר לדלג אליהם.

לדוגמה, אפשר לצפות בהדגמה שבהמשך מתוך ההרצאה על כלי הפיתוח בכנס I/O.

השינויים

תצוגות מקדימות אינפורמטיביות יותר של אובייקטים במסוף

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

איור 6. איך הייתה התצוגה המקדימה של אובייקטים במסוף

איור 7. איך מוצגת עכשיו תצוגה מקדימה של אובייקטים במסוף

תפריט בחירת הקשר אינפורמטיבי יותר במסוף

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

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

איור 8. כשמעבירים את העכבר מעל iframe בתפריט החדש Context Selection (בחירת הקשר), הוא מודגש באזור התצוגה.

עדכונים בזמן אמת בכרטיסייה 'סיקור'

כשמפעילים הקלטה של כיסוי קוד ב-Chrome 59, בכרטיסייה Coverage מוצג רק הכיתוב 'Recording...' (הקלטה...), בלי אפשרות לראות באיזה קוד נעשה שימוש. עכשיו, בכרטיסייה Coverage מוצג בזמן אמת הקוד שנמצא בשימוש.

איור 9. טעינה של דף וביצוע אינטראקציה איתו באמצעות הכרטיסייה הישנה כיסוי

איור 10. טעינה של דף ואינטראקציה איתו באמצעות הכרטיסייה החדשה Coverage

אפשרויות פשוטות יותר להגבלת רוחב פס

תפריטי ויסות הנתונים ברשת בחלוניות Network ו-Performance פושטו כך שהם כוללים רק שלוש אפשרויות: Offline,‏ Slow 3G (שכיח במקומות כמו הודו) ו-Fast 3G (שכיח במקומות כמו ארה"ב).

איור 11. האפשרויות החדשות להגבלת רוחב פס

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

דוחות של קריסות באופן אסינכרוני מופעלים כברירת מחדל

תיבת הסימון Async הוסרה מהחלונית Sources. דוחות של קריסות באופן אסינכרוני מופעלים עכשיו כברירת מחדל. בעבר, האפשרות הזו הייתה אופציונלית בגלל תקורה של ביצועים. התקורה עכשיו מינימלית מספיק כדי להפעיל את התכונה כברירת מחדל. אם אתם מעדיפים להשבית את עקבות המחסנית האסינכרוניים, אתם יכולים להשבית אותם בהגדרות או על ידי הפעלת הפקודה Do not capture async stack traces בתפריט הפקודות.

כלי הפיתוח בכנס Google I/O 2017

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

הורדת ערוצי התצוגה המקדימה

מומלץ להשתמש ב-Chrome Canary,‏ Dev או Beta כדפדפן ברירת המחדל לפיתוח. ערוצי התצוגה המקדימה האלה מאפשרים לכם לגשת לתכונות העדכניות ביותר של DevTools, לבדוק ממשקי API מתקדמים של פלטפורמות אינטרנט ולמצוא בעיות באתר לפני שהמשתמשים שלכם ימצאו אותן.

יצירת קשר עם הצוות של כלי הפיתוח ל-Chrome

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

מה חדש בכלי הפיתוח

רשימה של כל הנושאים שמופיעים בסדרת המאמרים מה חדש בכלי הפיתוח.