מה חדש בכלי הפיתוח (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 ונתיב בחלונית הרשת

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

צילום מסך של העמודות החדשות 'נתיב' ו'כתובת 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

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

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

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