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

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

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

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

המסוף תומך עכשיו באופרטורים של 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 עץ של החלונית Elements (רכיבים)

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

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

   

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

הדגשת רשת CSS

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

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

בסרטון שלמטה אנחנו מסבירים על היסודות של רשת CSS תוך פחות מ-2 דקות.

API חדש לשליחת שאילתות לגבי אובייקטים של ערימה (heap)

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

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

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

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

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

מסננים להחרגה

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

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

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

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

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

מסננים של כתובות URL

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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