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

Kayce Basques

תכונות ושינויים חדשים שיושקו בכלי הפיתוח ב-Chrome 62:

• תמיכה באופרטורים ברמה העליונה של await במסוף.
• צילומי מסך של חלק מחלון התצוגה וצילומי מסך של צמתים ספציפיים ב-HTML.
• הדגשת רשת CSS.
• ממשק API חדש של מסוף לשליחת שאילתות על אובייקטים.
• מסננים שליליים ומסנני כתובות URL במסוף.
• ייבוא קובצי HAR בחלונית רשת.
• משאבי מטמון שאפשר להציג תצוגה מקדימה שלהם.
• ניפוי באגים צפוי יותר במטמון.
• כיסוי קוד ברמת הבלוק.

אופרטורים של await ברמה העליונה במסוף

המסוף תומך עכשיו באופרטורים ברמה העליונה מסוג await.

איור 1. שימוש באופרטורים ברמה העליונה של await במסוף

תהליכי עבודה חדשים לצילומי מסך

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

צילומי מסך של חלק מחלון התצוגה

כדי לצלם מסך של חלק מחלון התצוגה:

1. לוחצים על בדיקה או מקישים על Command+Shift+C (ב-Mac) או על Control+Shift+C (ב-Windows או ב-Linux) כדי להיכנס למצב בדיקת רכיב.
2. לוחצים לחיצה ארוכה על Command (ב-Mac) או על Control (ב-Windows או ב-Linux) ובוחרים את החלק של אזור התצוגה שרוצים לצלם.
3. משחררים את העכבר. כלי הפיתוח מורידים צילום מסך של החלק שבחרתם.

איור 2. צילום מסך של חלק מחלון התצוגה

צילומי מסך של צמתים ספציפיים ב-HTML

כדי לצלם את המסך של צומת HTML ספציפי:

1. בוחרים רכיב בחלונית Elements.

   

   איור 3. בדוגמה הזו, המטרה היא לצלם מסך של הכותרת הכחולה שמכילה את הטקסט Tools. שימו לב שהצומת הזה כבר נבחר בעץ ה-DOM בחלונית רכיבים.

2. פותחים את תפריט הפקודות.

3. מתחילים להקליד node ובוחרים באפשרות Capture node screenshot. כלי הפיתוח מורידים צילום מסך של הצומת שנבחר.

   

   איור 4. התוצאה של הפקודה Capture node screenshot

הדגשת רשתות CSS

כדי להציג את רשת ה-CSS שמשפיעה על רכיב, מעבירים את העכבר מעל הרכיב בעץ ה-DOM בחלונית רכיבים. מסביב לכל פריט ברשת מופיע גבול מקווקו. הפעולה הזו פועלת רק אם האפשרות display:grid חלה על הפריט שנבחר או על האב של הפריט שנבחר.

איור 5. הדגשת רשת CSS

בסרטון הבא מוסבר בקצרה על העקרונות הבסיסיים של CSS Grid.

ממשק API חדש לשאילתות על אובייקטים ב-heap

קוראים ל-queryObjects(Constructor) מתוך המסוף כדי להחזיר מערך של אובייקטים שנוצרו באמצעות המבנה המוגדר. לדוגמה:

• queryObjects(Promise). מחזירה את כל ה-Promises.
• queryObjects(HTMLElement). הפונקציה מחזירה את כל רכיבי ה-HTML.
• queryObjects(foo), כאשר foo הוא שם הפונקציה. הפונקציה מחזירה את כל האובייקטים שנוצרו באמצעות new foo().

ההיקף של queryObjects() הוא הקשר הביצוע שנבחר כרגע במסוף. למידע נוסף, ראו בחירת הקשר הביצוע.

מסננים חדשים במסוף

מסוף תומך עכשיו במסננים של כתובות URL ובמסננים שליליים.

מסננים שליליים

מקלידים -<text> בתיבה Filter כדי לסנן כל הודעה מ-Console שכוללת את <text>.

איור 6. ההצהרה הראשונה מתעדת את הערכים one,‏ two,‏ three ו-four במסוף. two מוסתרת כי -two מופיע בתיבה מסנן

כלי הפיתוח מסננים הודעה אם נמצא <text>:

• בטקסט של ההודעה.
• בשם הקובץ שממנו נשלחה ההודעה.
• בטקסט של נתיב הסטאק.

המסנן השלילי פועל גם עם ביטויים רגולריים כמו -/[4-5]*ms/.

מסנני כתובות URL

מקלידים url:<text> בתיבה Filter כדי להציג רק הודעות שמקורן בסקריפט שכתובת ה-URL שלו כוללת את <text>.

המסנן משתמש בהתאמה מעורפלת. אם הערך <text> מופיע בכל מקום בכתובת ה-URL, ההודעה תוצג בכלי הפיתוח.

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

ייבוא של קובצי HAR בחלונית 'רשת'

כדי לייבא קובץ HAR, גוררים אותו ומשחררים אותו בחלונית Network.

איור 8. ייבוא של קובץ HAR

משאבי מטמון שאפשר להציג תצוגה מקדימה שלהם בחלונית 'אפליקציות'

לוחצים על שורה בטבלה Cache Storage כדי להציג תצוגה מקדימה של המשאב הזה מתחת לטבלה.

איור 9. תצוגה מקדימה של משאב מטמון

ניפוי באגים מהיר יותר במטמון

ב-Chrome 61 ובגרסאות קודמות, ניפוי באגים במטמון שנוצר באמצעות Cache API הוא… קשה. לדוגמה, כשדף יוצר מטמון חדש, צריך לרענן את הדף או את כלי הפיתוח באופן ידני כדי לראות את המטמון החדש.

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

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

בדיקת כיסוי קוד ברמת הבלוק

ב-Chrome 61 ובגרסאות קודמות, הכרטיסייה Coverage (כיסוי) מסמנת את כל הקוד בתוך פונקציה כקוד בשימוש, כל עוד הפונקציה נקראת.

איור 10. דוגמה לכרטיסייה כיסוי ב-Chrome 61. שורה 4 מסומנת כ'בשימוש', למרות שהיא אף פעם לא מתבצעת

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

איור 11. דוגמה לכרטיסייה כיסוי ב-Chrome 62. שורה 4 מסומנת כ'לא בשימוש'

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

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.