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

Kayce Basques

תמיכה בהצהרות מחדש של let ו-class במסוף

המסוף תומך עכשיו בהצהרות מחדש של הצהרות let ו-class. חוסר היכולת להצהיר מחדש, דבר מטריד מאוד למפתחי אתרים שמשתמשים במסוף כדי להתנסות בקוד JavaScript חדש.

לדוגמה, בעבר, כשמצהירים מחדש על משתנה מקומי עם let, המסוף יציג שגיאה:

צילום מסך של המסוף ב-Chrome 78 שבו רואים שההצהרה מחדש על הרשאה נכשלה.

עכשיו אפשר להגיש הצהרה מחדש במסוף:

צילום מסך של המסוף ב-Chrome 80 שבו רואים שההצהרה מחדש על ההרשאה מצליחה.

בעיה ב-Chromium #1004193

ניפוי באגים משופר ב-WebAssembly

הכלי DevTools התחיל לתמוך בתקן לניפוי באגים ב-DWARF, מה שמוביל לתמיכה מוגברת במעבר על קוד, בהגדרת נקודות עצירה (breakpoint) ובפתרון דוחות קריסות בשפות המקור שלכם בכלי הפיתוח. כדי לקרוא את הסיפור המלא, אפשר לעיין במאמר ניפוי באגים משופר ב-WebAssembly בכלי הפיתוח ל-Chrome.

צילום מסך של ניפוי הבאגים החדש שמופעל על ידי DWARF באמצעות WebAssembly.

עדכונים בחלונית הרשת

בקשת שרשראות שמפעילים בכרטיסייה 'יוזם'

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

צילום מסך של שרשרת בקשה להפעלה בכרטיסייה 'יוזם'

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

  • המשאב שנבדק מודגש. בצילום המסך שלמעלה, https://web.dev/default-627898b5.js הוא המשאב שנבדק.
  • המשאבים שמופיעים מעל המשאב שנבדק הם היוזמים. בצילום המסך שלמעלה, https://web.dev/bootstrap.js הוא היוזם של https://web.dev/default-627898b5.js. במילים אחרות, https://web.dev/bootstrap.js גרם לבקשת הרשת עבור https://web.dev/default-627898b5.js.
  • המשאבים שמתחת למשאב שנבדק הם יחסי התלות. בצילום המסך שלמעלה, https://web.dev/chunk-f34f99f7.js הוא תלות ב-https://web.dev/default-627898b5.js. במילים אחרות, https://web.dev/default-627898b5.js גרם לבקשת הרשת עבור https://web.dev/chunk-f34f99f7.js.

בעיה ב-Chromium #842488

הדגשת בקשת הרשת שנבחרה בסקירה הכללית

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

צילום מסך של החלונית Overview (סקירה כללית) שבה מודגש המשאב שנבדק.

בעיה ב-Chromium #988253

העמודות של כתובות URL ונתיב בחלונית 'רשת'

בחלונית Network מופיעות העמודות Path ו-URL החדשות, כדי לראות את הנתיב המוחלט או את כתובת ה-URL המלאה של כל משאב רשת.

צילום מסך של העמודות החדשות 'נתיב' ו-'כתובת URL' בחלונית 'רשת'.

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

בעיה ב-Chromium #993366

מחרוזות סוכן משתמש מעודכנות

בכלי הפיתוח אפשר להגדיר מחרוזת מותאמת אישית של סוכן משתמש דרך הכרטיסייה תנאי הרשת. מחרוזת ה-User-Agent משפיעה על כותרת ה-HTTP User-Agent שמצורפת למשאבי הרשת, וגם על הערך של navigator.userAgent.

המחרוזות המוגדרות מראש של סוכן המשתמש עודכנו כך שישקפו גרסאות מודרניות של הדפדפן.

צילום מסך של התפריט 'סוכן משתמש' בכרטיסייה 'תנאי רשת'.

כדי לגשת אל תנאי הרשת, פותחים את תפריט הפקודה ומריצים את הפקודה Show Network Conditions.

בעיה ב-Chromium #1029031

עדכונים בחלונית הביקורת

ממשק משתמש חדש להגדרות אישיות

לממשק המשתמש של ההגדרות האישיות יש עיצוב רספונסיבי חדש, ואפשרויות ההגדרה של ויסות הנתונים (throttle) פשוטות יותר. מידע נוסף על השינויים בממשק המשתמש של ויסות הנתונים זמין במאמר ויסות נתונים (throttle) של חלונית הביקורת.

ממשק המשתמש החדש של הגדרות אישיות.

עדכונים לגבי הכרטיסייה 'כיסוי'

מצבי כיסוי לפי פונקציה או לפי בלוק

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

התפריט הנפתח של מצב הכיסוי.

מעכשיו, הכיסוי צריך להתחיל מחדש באמצעות טעינה מחדש של הדף

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

בעיה ב-Chromium #1004203

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

כדאי להשתמש ב-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