מה חדש בכלי הפיתוח (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

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

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

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

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

בעיה ב-Chromium: 1313382

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

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

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

בעיה ב-Chromium: 1318087

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

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

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

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

בעיה ב-Chromium: 1146146

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

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

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

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

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

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

בעיות ב-Chromium: 1226363

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

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

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

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

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

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

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

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

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

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

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

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