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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    דוגמה לצומת

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

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

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

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

    איור 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 הוזן בתיבה Filter

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

דוגמה לכרטיסייה &#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 שקשורים לכלי פיתוח.

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 בוטל.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59