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

Kayce Basques

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

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

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

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

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

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

בעיה ב-Chromium‏ #1004193

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

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

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

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

בקשה לשרשרת מאתחל בכרטיסייה 'מאתחל'

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

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

אחרי שתתעדו את פעילות הרשת ביומן בחלונית 'רשת', תוכלו ללחוץ על משאב מסוים ואז לעבור לכרטיסייה Initiator כדי להציג את Request Initiator Chain שלו:

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

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

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

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

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

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

בעיה ב-Chromium‏ #1029031

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium‏ #1004203

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.