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

תכונות ושינויים חדשים שצפויים בקרוב בכלי הפיתוח ב-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. בוחרים רכיב בחלונית רכיבים.

    דוגמה לצומת

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

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

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

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

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

הדגשת רשת CSS

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

הדגשת רשת CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

דוגמה לכרטיסיית הכיסוי ב-Chrome 62

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

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

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

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

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

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

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

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

Chrome 123

גרסה 122 של Chrome

גרסה 121 של Chrome

Chrome 120

גרסה 119 של Chrome

גרסה 118 של Chrome

גרסה 117 של Chrome

גרסה 116 של Chrome

Chrome 115

Chrome 114

גרסה 113 של Chrome

גרסה 112 של Chrome

גרסה 111 של Chrome

Chrome 110

Chrome 109

גרסה 108 של Chrome

גרסה 107 של Chrome

Chrome 106

Chrome 105

Chrome 104

גרסה 103 של Chrome

גרסה 102 של Chrome

גרסה 101 של Chrome

Chrome 100

גרסה 99 של Chrome

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

גרסה 92 של Chrome

גרסה 91 של Chrome

Chrome 90

גרסה 89 של Chrome

גרסה 88 של Chrome

גרסה 87 של Chrome

גרסה 86 של Chrome

גרסה Chrome 85

גרסה 84 של Chrome

גרסה 83 של Chrome

גרסה 82 של Chrome

Chrome 82 בוטל.

גרסה 81 של Chrome

גרסה 80 של Chrome

גרסה 79 של Chrome

גרסה 78 של Chrome

גרסה 77 של Chrome

גרסה 76 של Chrome

גרסה 75 של Chrome

גרסה 74 של Chrome

גרסה 73 של Chrome

גרסה 72 של Chrome

גרסה 71 של Chrome

גרסה 70 של Chrome

גרסה Chrome 68

Chrome גרסה 67

Chrome 66

גרסה Chrome 65

Chrome 64

Chrome 63

גרסה 62 של Chrome

גרסה 61 של Chrome

Chrome 60

Chrome 59