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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

מצב טווח הזמן

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

בעיה ב-Chromium: 1291284

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

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

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

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

בעיה ב-Chromium: 1313382

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

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

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

בעיה ב-Chromium: 1318087

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

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

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

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

בעיה ב-Chromium: 1146146

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

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

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

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

בעיה ב-Chromium: 1245191

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

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

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

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

בעיה ב-Chromium: 1316340

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

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

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

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

בעיה ב-Chromium: 1321803

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

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

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

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

בעיות ב-Chromium: 1226363

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

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

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

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

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

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

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

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

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

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

  • אפשר לשלוח לנו הצעה או משוב דרך crbug.com.
  • כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות   עוד   > עזרה > דיווח על בעיות בכלי הפיתוח בכלי הפיתוח.
  • שליחת ציוץ אל @ChromeDevTools.
  • נשמח לשמוע מה חדש בסרטונים ב-YouTube של כלי הפיתוח או בסרטונים ב-YouTube שקשורים לכלי פיתוח.

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 בוטל.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59