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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

מצב טווח זמן

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

בעיה ב-Chromium: ‏ 1291284

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

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

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

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

בעיה ב-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

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

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

  • החלפה בין הצגה להסתרה של סרגל הצד לניווט (מימין) באמצעות 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

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

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

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

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