מה חדש בכלי הפיתוח (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) ואז לוחצים כדי להמשיך לשורת הקוד הזו. כלי הפיתוח מדגישים בכחול את היעדים שאפשר לקפוץ אליהם.

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

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

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

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

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

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

השינויים

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

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

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

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

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

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

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

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

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

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

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

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

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

תפריטי ויסות הנתונים ברשת בחלוניות רשת וביצועים פושטו ועכשיו הם כוללים רק שלוש אפשרויות: אופליין, 3G איטי, שכיח במקומות כמו הודו, ו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.
• אפשר להוסיף תגובות לסרטונים מה חדש בכלי הפיתוח של YouTube או טיפים לשימוש בכלי הפיתוח של YouTube.

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

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