דף זה תורגם על ידי Cloud Translation API.

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

Jecelyn Yeen

קיבוץ קבצים לפי יוצרים או פרוסים בחלונית 'מקורות'

האפשרות Group files by Authored / Deployed מופיעה בתפריט של התפריט (3 נקודות). בעבר היא הוצגה ישירות בחלונית הניווט.

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

קיבוץ קבצים לפי הרשאות / פרוסות

באג ב-Chromium: 1352488

דוחות קריסות משופרים

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

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

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

// application.component.ts

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

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

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

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

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

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

באג ב-Chromium: 1334585

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

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

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

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

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

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

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

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

באג ב-Chromium: 1323199

מקבץ שיחות משופר במהלך ניפוי באגים

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

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

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

מקבץ שיחות משופר במהלך ניפוי באגים

באג ב-Chromium: 1352488

הסתרת מקורות ברשימת קטעי הקוד להתעלמות בחלונית 'מקורות'

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

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

הסתרת מקורות ברשימת קטעי הקוד להתעלמות בחלונית 'מקורות'

באג ב-Chromium: 1352488

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

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

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

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

באג ב-Chromium: 1336604

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

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

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

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

באג ב-Chromium: 1347390

פירוט של תזמוני LCP בחלונית Performance Insights

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

פירוט של תזמוני LCP בחלונית Performance Insights

באג ב-Chromium: 1351735

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

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

שם ברירת המחדל להקלטות בחלונית 'מכשיר הקלטה'

באג ב-Chromium: 1351383

פרטים שונים

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

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

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

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

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

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