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

Kayce Basques

חדשים בכלי הפיתוח ב-Chrome 68:

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

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

מסוף מסייע

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

הערכה נלהבת

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

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

כדי להפעיל את Eager Evaluation:

1. פותחים את המסוף.
2. פותחים את הגדרות המסוף. .
3. מפעילים את תיבת הסימון Eager Assess

כלי הפיתוח לא ישמח להעריך אם הביטוי גורם לתופעות לוואי.

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

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

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

הערות:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

התמיכה ב-BigInt

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

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

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

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

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

"Show timestamps" (הצגת חותמות זמן) הועבר להגדרות

תיבת הסימון Show timestamps (הצגת חותמות זמן) בהגדרות המסוף עבר להגדרות.

הורדת הערוצים של התצוגה המקדימה

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

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

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

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

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

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