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

Kayce Basques

מה חדש בכלי הפיתוח בגרסה 68 של Chrome:

• הערכה יזומה. בזמן שאתם מקלידים ביטויים, המסוף מציג תצוגה מקדימה של התוצאה.
• הצעות לארגומנטים. כשמקלידים פונקציות, המסוף מציג את הארגומנטים הצפויים של הפונקציה.
• השלמה אוטומטית של פונקציות. אחרי שמקלידים קריאה לפונקציה כמו document.querySelector('p'), המסוף מציג את הפונקציות והמאפיינים שערך ההחזרה תומך בהם.
• מילות מפתח של ES2017 במסוף. מילות מפתח כמו await זמינות עכשיו בממשק המשתמש של ההשלמה האוטומטית ב-Console.
• ‫Lighthouse 3.0 בחלונית Audits. ביקורות מהירות ועקביות יותר, ממשק משתמש חדש וביקורות חדשות.
• BigInt תמיכה. אפשר לנסות את המספר השלם החדש ב-JavaScript עם דיוק שרירותי במסוף.
• הוספת נתיבים של מאפיינים לחלונית Watch. מוסיפים מאפיינים מחלונית Scope (היקף) לחלונית Watch (שעון).
• האפשרות 'הצגת חותמות זמן' הועברה אל ההגדרות.

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

Assistive Console

גרסה Chrome 68 כוללת כמה תכונות חדשות ב-Console שקשורות להשלמה אוטומטית ולתצוגה מקדימה.

הערכה יזומה

כשמקלידים ביטוי במסוף, המסוף יכול להציג תצוגה מקדימה של תוצאת הביטוי מתחת למיקום הסמן.

איור 1. התוצאה של הפעולה sort() מודפסת במסוף לפני שהיא בוצעה באופן מפורש

כדי להפעיל הערכה יזומה:

1. פותחים את המסוף.
2. פותחים את הגדרות המסוף .
3. מסמנים את תיבת הסימון הערכה יזומה.

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

הינטים לארגומנטים

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

איור 2. דוגמאות שונות לרמזים לארגומנטים במסוף

הערות:

• סימן שאלה לפני ארגומנט, כמו ?options, מייצג ארגומנט אופציונלי.
• שלוש נקודות לפני ארגומנט, כמו ...items, מייצגות פירוק.
• חלק מהפונקציות, כמו CSS.supports(), מקבלות כמה חתימות של ארגומנטים.

השלמה אוטומטית אחרי הפעלת פונקציות

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

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

מילות מפתח של ES2017 בהשלמה אוטומטית

מילות מפתח של ES2017, כמו await, זמינות עכשיו בממשק המשתמש של ההשלמה האוטומטית במסוף.

איור 4. עכשיו מוצגת הצעה ל-await בממשק המשתמש של ההשלמה האוטומטית ב-Console

ביקורות מהירות ואמינות יותר, ממשק משתמש חדש וביקורות חדשות

‫Chrome 68 מגיע עם Lighthouse 3.0. בקטעים הבאים מפורטים חלק מהשינויים הגדולים ביותר. פרטים נוספים זמינים במאמר השקת Lighthouse 3.0.

ביקורות מהירות ואמינות יותר

ל-Lighthouse 3.0 יש מנוע חדש פנימי לביקורת, ששם הקוד שלו הוא Lantern. המנוע הזה משלים את הביקורות מהר יותר, עם פחות שונות בין ההרצות.

ממשק משתמש חדש

בנוסף, גרסה 3.0 של Lighthouse כוללת ממשק משתמש חדש, הודות לשיתוף פעולה בין צוותי Lighthouse ו-Chrome UX (מחקר ועיצוב).

איור 5. ממשק המשתמש החדש של הדוחות ב-Lighthouse 3.0

ביקורות חדשות

ב-Lighthouse 3.0 יש גם 4 ביקורות חדשות:

• הצגת תוכן ראשוני (FCP)
• robots.txt אינו חוקי
• שימוש בפורמטים של וידאו לתוכן אנימציה
• הימנעות מנסיעות הלוך ושוב יקרות לכל יעד

תמיכה ב-BigInt

‫Chrome 68 תומך בפרימיטיב מספרי חדש שנקרא BigInt. ‫BigInt מאפשר לייצג מספרים שלמים עם דיוק שרירותי. כדאי לנסות במסוף:

איור 6. דוגמה של BigInt במסוף

הוספת נתיב של מאפיין לשעון

בזמן שההפעלה מושהית בנקודת עצירה, לוחצים לחיצה ימנית על מאפיין בחלונית Scope (היקף) ובוחרים באפשרות Add property path to watch (הוספת נתיב של מאפיין לשעון) כדי להוסיף את המאפיין הזה לחלונית Watch (שעון).

איור 7. דוגמה לשימוש באפשרות הוספת נתיב של מאפיין לשעון

ההגדרה 'הצגת חותמות זמן' הועברה להגדרות

תיבת הסימון הצגת חותמות זמן שהייתה קודם בהגדרות המסוף הועברה אל הגדרות.

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

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• כדי לדווח על בעיה בכלי הפיתוח, לוחצים על more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי הפיתוח בכלי הפיתוח.
• שולחים ציוץ אל @ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים מה חדש בכלי הפיתוח של YouTube או טיפים לשימוש בכלי הפיתוח של YouTube.

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

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