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

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

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

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

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

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

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

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

צילומי מסך של חלק מאזור התצוגה

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

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

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

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

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

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

   

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

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

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

   

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

הדגשה של CSS Grid

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

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

בסרטון הבא מוסבר בקצרה על CSS Grid.

‫API חדש להרצת שאילתות על אובייקטים של ערימה

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

• queryObjects(Promise). מחזירה את כל ההבטחות.
• ‫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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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