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

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

  • אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
  • אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
  • שולחים ציוץ אל ‎@ChromeDevTools.
  • אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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