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

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

המיטב

  • השם של חלונית ציר הזמן השתנה ל'חלונית ביצועים'.
  • השם של חלונית הפרופילים השתנה ל'חלונית הזיכרון'.
  • עכשיו אפשר לערוך את ערכי קובצי ה-cookie.
  • עכשיו, DevTools מושהה באופן אוטומטי לפני שגיאות של חוסר זיכרון.

תכונות חדשות

קובצי cookie ניתנים לעריכה

לוחצים לחיצה כפולה על תא בכרטיסייה Cookies כדי לערוך את הערך הזה.

עריכת קובץ Cookie.
איור 1. עריכת קובץ Cookie

תודה ל-kdzwinel על התרומה!

משתני CSS שאפשר לבדוק ולערוך בחלונית 'סגנונות'

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

נקודות עצירה (breakpoint) שחסרות להן מספיק זיכרון

כשאפליקציה מקצה הרבה זיכרון בפרק זמן קצר, כלי הפיתוח עכשיו משהה באופן אוטומטי את הפעילות ומגדיל את מגבלת הערימה. כך תוכלו לבדוק את האוסף, להריץ פקודות במסוף כדי לפנות זיכרון ולהמשיך בניפוי הבאגים. מידע נוסף זמין במאמר One Small Step For Chrome, One Giant Heap For V8.

הכלי הושהה בנקודת עצירה (breakpoint) עקב חוסר בזיכרון
איור 2. הכלי הושהה בנקודת עצירה (breakpoint) עקב חוסר בזיכרון

נקודות עצירה ביצירת קנבס

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

נקודות עצירה ליצירת לוח הציור באמצעות תיבת הסימון Create canvas context בחלונית Event Listener Breakpoints
איור 3. נקודות עצירה ליצירת לוח הציור באמצעות תיבת הסימון Create canvas context בחלונית Event Listener Breakpoints

נתונים סטטיסטיים על שעת ההתחלה בכרטיסייה 'תזמון'

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

נתונים סטטיסטיים על שעת ההתחלה בכרטיסייה 'תזמון'.
איור 4. נתונים סטטיסטיים על שעת ההתחלה בכרטיסייה 'תזמון'

נתוני סטטיסטיקה של השרת בכרטיסייה Timing (תזמון)

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

נתוני סטטיסטיקה של השרת בכרטיסייה Timing
איור 5. נתוני סטטיסטיקה של השרת בכרטיסייה Timing

תודה ל-sroussey על התרומה!

השינויים

חלונית ציר הזמן נקראת עכשיו 'חלונית הביצועים'

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

חלונית הפרופילים נקראת עכשיו 'זיכרון'

שינינו את השם של 'חלונית הפרופילים' ל'חלונית הזיכרונות' כדי לשקף טוב יותר את המטרה שלה.

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

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

במאמר Chrome DevTools: JavaScript CPU Profiling in Chrome 58 מוסבר איך ליצור פרופיל של המעבד בחלונית 'ביצועים'.

ממשק המשתמש החדש של הקונסולה

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

  • לוחצים על Console Settings (הגדרות מסוף) הגדרות מסוף כדי לגשת להגדרות להתאמה אישית של התנהגות מסוף.
  • האפשרות שימור יומן מוסתרת עכשיו בקטע הגדרות מסוף.
  • הלחצן והחלונית מסננים לא יופיעו. במקום זאת, משתמשים בתפריט הנפתח.
  • תיבת הטקסט לסינון יומנים מוצגת עכשיו תמיד. בעבר הוא היה מוסתר בחלונית 'מסננים'.
  • תיבת הטקסט לסינון מקבלת באופן אוטומטי ביטויים רגולריים, ולכן תיבת הסימון ביטוי רגולרי לא מופיעה.
  • תיבת הסימון הסתרת הפרות לא מופיעה. כדי לראות הפרות, מגדירים את התפריט הנפתח של רמת הרישום ביומן ל-Verbose.
  • ביטול הסימון של התיבה הצגת כל ההודעות בממשק המשתמש הישן שווה לסימן בתיבה הקשר שנבחר בלבד בקטע הגדרות מסוף בממשק המשתמש החדש.
ממשק המשתמש החדש של מסוף Google
איור 6. ממשק המשתמש החדש של מסוף Google Console

נקודות העצירה של פונקציות ה-event listener ב-WebGL הועברו

נקודות העצירה של event listener ב-WebGL הועברו מהקטגוריה WebGL לקטגוריה Canvas. הקטגוריה WebGL הוסרה.