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

Kayce Basques
Kayce Basques
X GitHub

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

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

Assistive Console

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

הערכה יזומה

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

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

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

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

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

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

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

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

רמזים לארגומנטים במסוף.

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

הערות:

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

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

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

אחרי שמריצים את document.querySelector('p'), אפשר לראות במסוף את המאפיינים והפונקציות שזמינים לאותו רכיב.

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

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

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

עכשיו, במסוף מוצעת השלמה אוטומטית של await בממשק המשתמש.

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

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

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

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

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

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

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

ממשק המשתמש החדש של הדוחות ב-Lighthouse 3.0.

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

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

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

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

תמיכה ב-BigInt

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

דוגמה ל-BigInt במסוף.

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

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

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

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

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

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

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

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

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

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

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

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

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

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