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

Kayce Basques

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

• הערכה יזומה. בזמן שאתם מקלידים ביטויים, המסוף מציג תצוגה מקדימה של התוצאה.
• הצעות לארגומנטים. כשמקלידים פונקציות, המסוף מציג את הארגומנטים הצפויים של הפונקציה.
• השלמה אוטומטית של פונקציות. אחרי שמקלידים קריאה לפונקציה כמו document.querySelector('p'), המסוף מציג את הפונקציות והמאפיינים שערך ההחזרה תומך בהם.
• מילות מפתח של ES2017 במסוף. מילות מפתח כמו await זמינות עכשיו בממשק המשתמש של ההשלמה האוטומטית במסוף.
• ‫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 מאפשר לייצג מספרים שלמים עם דיוק שרירותי. כדאי לנסות את זה ב-Console:

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

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

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

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

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

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

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

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

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

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

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

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

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