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

Kayce Basques

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

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

הערה: אפשר לבדוק איזו גרסה של Chrome מותקנת במחשב בכתובת chrome://version. אם אתם משתמשים בגרסה קודמת, התכונות האלה לא קיימות. אם אתם משתמשים בגרסה מאוחרת יותר, יכול להיות שהתכונות האלה השתנו. ‫Chrome מתעדכן אוטומטית לגרסה ראשית חדשה בערך כל 6 שבועות.

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

Assistive Console

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

הערכה יזומה

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

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

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

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

פותחים את המסוף.
פותחים את הגדרות המסוף .
מסמנים את תיבת הסימון Eager evaluation (הערכה מיידית).

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

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

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

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

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

הערות:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ממשק המשתמש החדש של הדוחות ב-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.