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

Kayce Basques

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

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

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

    התוצאה של 'צילום המסך של הצומת' מקש Command

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

הדגשת רשת CSS

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

הדגשת רשת CSS

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

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

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

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

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

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

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

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

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

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

דוגמה ל-3 הודעות שיסוננו

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

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

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

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

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

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

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

דוגמה לסינון כתובות URL

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

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

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

ייבוא של קובץ HAR

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

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

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

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

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

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

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

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

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

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

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

דוגמה לכרטיסייה &#39;כיסוי&#39; ב-Chrome 61

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

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

דוגמה לכרטיסייה &#39;כיסוי&#39; ב-Chrome 62

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

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

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

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

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

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

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

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