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

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

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

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

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

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

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

בעיה ב-Chromium #1004193

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

כלי הפיתוח התחילה לתמוך ב-DWARF Debugging Standard (תקן ניפוי הבאגים של 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.
  • המשאבים שמתחת למשאב שנבדק הם dependencies. בצילום המסך שלמעלה, 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

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

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

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

בעיה ב-Chromium #988253

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

צריך להשתמש בעמודות נתיב ו-URL החדשות בחלונית רשת כדי לראות את הנתיב המוחלט או את הנתיב המלא כתובת ה-URL של כל משאב רשת.

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

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

בעיה ב-Chromium #993366

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

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

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

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

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

בעיה ב-Chromium #1029031

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium #1004203

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

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

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

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

  • אפשר לשלוח לנו הצעה או משוב דרך crbug.com.
  • כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות   עוד > עזרה > דיווח על בעיות בכלי הפיתוח ב'כלי פיתוח'.
  • שליחת ציוץ אל @ChromeDevTools.
  • נשמח לשמוע מה חדש בסרטונים ב-YouTube של כלי הפיתוח או בסרטונים ב-YouTube שקשורים לכלי פיתוח.

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

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