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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

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

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

בעיה ב-Chromium מספר 1004193

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

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

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

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

בקשות לשרשרת מאתחל בכרטיסייה Initiator (מאתחל)

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

צילום מסך של בקשה לשרשרת מאתחל בכרטיסייה Initiator

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

  • המשאב שנבדק מודגש. בצילום המסך שלמעלה, 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

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

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

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

בעיה ב-Chromium‏ #988253

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

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

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

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

בעיה ב-Chromium‏ #993366

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

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

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

צילום מסך של התפריט User Agent בכרטיסייה Network Conditions (תנאי הרשת).

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

בעיה ב-Chromium‏ #1029031

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium‏ #1004203

הורדת ערוצי התצוגה המקדימה

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

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

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

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

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