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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1291284

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

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

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

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

בעיה ב-Chromium: 1313382

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

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

בעיה ב-Chromium: ‏ 1318087

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

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

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

בעיה ב-Chromium: ‏ 1146146

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

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

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

בעיה ב-Chromium: ‏ 1245191

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

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

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

בעיה ב-Chromium: ‏ 1316340

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

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

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

בעיה ב-Chromium: ‏ 1321803

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

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

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

בעיות ב-Chromium: ‏ 1226363

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

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

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

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

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

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

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

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

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

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

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

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

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