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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

מצב טווח זמן

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

בעיה ב-Chromium: 1291284

עדכונים בתובנות לגבי הביצועים

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

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

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

בעיה ב-Chromium: 1313382

אישור המחיקה של הקלטת הופעה

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

אישור המחיקה של הקלטת הופעה

בעיה ב-Chromium: 1318087

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

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

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

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

בעיה ב-Chromium: 1146146

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

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

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

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

בעיה ב-Chromium: 1245191

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

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

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

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

בעיה ב-Chromium: 1316340

תמיכה ב-blobs גדולים במאמתים וירטואליים

בכרטיסייה WebAuthn יש עכשיו את תיבת הסימון החדשה Support Large blob (תמיכה ב-blob גדול) למאמתים וירטואליים.

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

תמיכה ב-blobs גדולים במאמתים וירטואליים

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.