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

Jecelyn Yeen

קיבוץ קבצים לפי 'כפי שנוצר' / 'פרוס' בחלונית המקורות

האפשרות קיבוץ קבצים לפי 'כפי שנוצר' / 'פרוס' מוצגת עכשיו בתפריט (3 נקודות). בעבר הוא הוצג ישירות בחלונית הניווט.

פותחים את ההדגמה הזו. מפעילים את ההגדרה Group files by Authored / Deployed כדי לראות קודם את קוד המקור המקורי (Authored) ולנווט אליו מהר יותר.

באג ב-Chromium: ‏ 1352488

שיפור דוחות הקריסות

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

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

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

// application.component.ts  async increment() {     await Promise.resolve().then(() => timeout(100));     … } 

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

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

מאחורי הקלעים, בכלי הפיתוח נוספה התכונה החדשה Async Stack Tagging (תיוג של מחסנית אסינכרונית). אפשר לספר את הסיפור המלא של הפעולה על ידי קישור שני החלקים של הקוד האסינכרוני באמצעות השיטה החדשה console.createTask(). מידע נוסף זמין במאמר ניפוי באגים מודרני בכלי הפיתוח.

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

באג ב-Chromium: ‏ 1334585

התעלמות אוטומטית מסקריפטים ידועים של צד שלישי

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

פותחים את ההדגמה הזו ולוחצים על לחצן ההגדלה. מרחיבים את הודעת השגיאה במסוף. דוח הקריסה מציג רק את הקוד שלכם (למשל app.component.ts button.component.ts). לוחצים על הצגת מסגרות נוספות כדי לראות את דוח הקריסה המלא.

בעבר, מעקב המחסנית כלל סקריפטים של צד שלישי כמו zone.js ו-core.mjs. אלה לא קודי המקור שלכם, אלא קודים שנוצרו על ידי כלי חבילה (למשל, webpack) או מסגרות (למשל, Angular). זמן ארוך יותר נדרש כדי לזהות את שורש הבעיה של שגיאה.

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

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

באג ב-Chromium: ‏ 1323199

שיפור ב-call stack במהלך ניפוי באגים

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

פותחים את הדמו הזה ומגדירים נקודת עצירה בפונקציה increment() ב-app.component.ts. לוחצים על לחצן ההגדלה בדף כדי להפעיל את נקודת עצירה. ב-call stack מוצגות רק מסגרות מהקוד שלכם (לדוגמה, app.component.ts ו-button.component.ts).

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

באג ב-Chromium: ‏ 1352488

הסתרת מקורות שכלולים ברשימת הפריטים להתעלמות בחלונית המקורות

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

פותחים את ההדגמה הזו. בחלונית מקורות. ‫node_modules ו-webpack הם סקריפטים של צד שלישי. לוחצים על סמל האפשרויות הנוספות (3 נקודות) ובוחרים באפשרות הסתרת מקורות שנכללים ברשימת ההתעלמות כדי להסתיר אותם בחלונית.

באג ב-Chromium: ‏ 1352488

הסתרת קבצים שכלולים ברשימת הפריטים להתעלמות בתפריט הפקודות

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

לדוגמה, מפעילים את ההגדרה הסתרת מקורות שנכללים ברשימת ההתעלמות ולוחצים על סמל התפריט (3 נקודות). לוחצים על פתיחת הקובץ. מקלידים 'ton' כדי לחפש רכיבי לחצנים. בעבר, התוצאות כללו קבצים מ-node_modules, ואחד מקובצי node_modules אפילו הופיע כתוצאה הראשונה.

באג ב-Chromium: ‏ 1336604

הוספת כרטיסייה חדשה של אינטראקציות בחלונית הביצועים

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

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

באג ב-Chromium: ‏ 1347390

פירוט של תזמוני LCP בחלונית 'תובנות לגבי הביצועים'

בחלונית Performance Insights מוצג עכשיו פירוט של הזמנים של המהירות שבה נטען רכיב התוכן הכי גדול (LCP). המידע על התזמונים האלה יכול לעזור לכם להבין ולזהות הזדמנות לשיפור הביצועים של LCP.

באג ב-Chromium: 1351735

יצירה אוטומטית של שם ברירת מחדל להקלטות בחלונית ההקלטה

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

באג ב-Chromium: 1351383

מידע חשוב נוסף

• בעבר, תוספי Recorder לא הופיעו מדי פעם בחלונית Recorder. (1351416)
• בחלונית סגנונות מוצג עכשיו בוחר צבעים למאפיין stop-color של רכיב SVG <stop>. (1351096)
• במסגרת תובנות לגבי ביצועים, אפשר לזהות סקריפטים שגורמים לשינויים בפריסה כסיבות אפשריות לשינויים בפריסה. (1343019)
• הצגת הנתיב הקריטי לגופני אינטרנט של LCP בחלונית תובנות לגבי הביצועים. (1350390)

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

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

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

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

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

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

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