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

Jecelyn Yeen

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

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

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

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

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

כדי להבין איך Recorder תיעד את האירועים האלה, מרחיבים את השלבים:

  • לחיצה כפולה מתועדת כ-type: doubleClick.
  • אירוע לחיצה ימנית מתועד כ-type: click, אבל המאפיין button מוגדר כ-secondary. הערך button של לחיצה רגילה בעכבר הוא primary.

בעיות ב-Chromium: 1300839, ‏ 1322879, ‏ 1299701, ‏ 1323688

מצב חדש של טווח זמן ותמונת מצב בחלונית Lighthouse

עכשיו אפשר להשתמש ב-Lighthouse כדי למדוד את ביצועי האתר מעבר לטעינת הדף.

מצב חדש של טווח זמן ותמונת מצב בחלונית Lighthouse

החלונית Lighthouse תומכת עכשיו ב-3 מצבים של מדידת מסלולי משתמשים:

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

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

מצב טווח זמן

במאמר User flows in Lighthouse מוסבר על תרחישי השימוש הייחודיים, היתרונות והמגבלות של כל מצב.

בעיה ב-Chromium: 1291284

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

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

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

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

בעיה ב-Chromium: ‏ 1313382

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

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

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

בעיה ב-Chromium: ‏ 1318087

סידור מחדש של חלוניות בחלונית הרכיבים

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

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

סידור מחדש של חלוניות בחלונית הרכיבים

בעיה ב-Chromium: ‏ 1146146

בחירת צבע מחוץ לדפדפן

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

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

בחירת צבע מחוץ לדפדפן

בעיה ב-Chromium: ‏ 1245191

שיפור התצוגה המקדימה של ערכים בתוך השורה במהלך ניפוי באגים

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

בדוגמה הזו, לפונקציה double יש פרמטר קלט a ומשתנה x. מציבים נקודת עצירה בשורה return ומריצים את הקוד. התצוגה המקדימה בתוך השורה מציגה את הערכים a ו-x בצורה נכונה. בעבר, הערך x לא הוצג בתצוגה המקדימה בשורה של ניפוי הבאגים.

שיפור התצוגה המקדימה של ערכים בתוך השורה במהלך ניפוי באגים

בעיה ב-Chromium: 1316340

תמיכה באובייקטים גדולים מסוג blob עבור רכיבי אימות וירטואליים

בכרטיסייה WebAuthn יש עכשיו את תיבת הסימון החדשה תמיכה באובייקטים גדולים מסוג blob למאמתים וירטואליים.

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

תמיכה באובייקטים גדולים מסוג blob עבור רכיבי אימות וירטואליים

בעיה ב-Chromium: 1321803

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

עכשיו יש שני מקשי קיצור חדשים בחלונית מקורות:

  • החלפה בין הצגה להסתרה של סרגל הצד לניווט (מימין) באמצעות Control / Command + Shift + Y
  • החלפה של סרגל הצד (שמימין) של כלי לניפוי באגים באמצעות ‎Control / Command + Shift + H

מקשי קיצור חדשים בחלונית Sources (מקורות)

בעיות ב-Chromium: ‏ 1226363

שיפורים במפות מקור

בעבר, מפתחים נתקלו בכשל אקראי במהלך:

  • ניפוי באגים באמצעות דוגמה ב-Codepen
  • זיהוי מיקום המקור של בעיות בביצועים בדוגמה של Codepen
  • הכרטיסייה Component חסרה כש-React DevTools מופעל

ריכזנו כאן כמה תיקונים במפות מקור כדי לשפר את חוויית הניפוי הכוללת:

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

בעיות ב-Chromium: 1319828, ‏ 1318635, ‏ 1305475

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

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

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

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

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

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