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

ייבוא וייצוא של זרימות משתמשים מתועדות כקובץ JSON

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

לדוגמה, מורידים את קובץ ה-JSON. אפשר לייבא אותם באמצעות לחצן הייבוא ולהפעיל מחדש את תהליך המשתמש.

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

  • מייצאים כקובץ JSON. מורידים את ההקלטה כקובץ JSON.
  • מייצאים כסקריפט של @puppeteer/replay. להוריד את ההקלטה כסקריפט של הפעלה מחדש של הבובה תיאטרון.
  • ייצוא כסקריפט של הבובה (Puppeteer) . להוריד את ההקלטה כסקריפט של Puppeteer.

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

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

בעיה ב-Chromium: 1257499

הצגת שכבות מדורגות בחלונית 'סגנונות'

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

בדוגמה הזו הוגדרו 3 שכבות מדורגות: page, component ו-base. בחלונית סגנונות אפשר להציג כל שכבה והסגנונות שלה.

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

הצגת שכבות מדורגות בחלונית 'סגנונות'

בעיה ב-Chromium: 1240596

תמיכה בפונקציית הצבע hwb()

עכשיו אפשר לראות ולערוך בכלי הפיתוח פורמט צבע HWB.

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

לחלופין, אפשר לשנות את פורמט הצבע ל-HWB בבורר הצבעים.

פונקציית הצבע hwb()

תצוגה משופרת של נכסים פרטיים

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

נכסים פרטיים במסוף

הבעיות ב-Chromium: 1296855, https://crbug.com/1303407

דגשים שונים

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

  • במטמון לדף הקודם/הבא מוצג עכשיו מזהה התוסף שחוסם את מטמון לדף הקודם/הבא כשהוא קיים.( 1284548)
  • תוקנה תמיכה בהשלמה אוטומטית עבור אובייקטים דמויי מערך, שמות מחלקות CSS, תגי map.get ותגי HTML. (1297101, 1297491, 1293807, 1296983)
  • תוקנו הדגשות שגויות במהלך לחיצה כפולה על מילים וביטול ההשלמה האוטומטית. (1298437, 1298667)
  • תוקנו מקשי הקיצור של התגובות בחלונית מקורות. (1296535)
  • אפשר להפעיל מחדש את התמיכה באמצעות מקש Alt (אפשרויות) לבחירה מרובה בחלונית מקורות. (1304070)

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

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

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

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

מצב טווח זמן ומצב תמונת מצב בבית הפאנל של Lighthouse

בעיה ב-Chromium: 772558

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

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

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

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

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

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

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

Chrome 123

גרסה 122 של Chrome

גרסה 121 של Chrome

Chrome 120

גרסה 119 של Chrome

גרסה 118 של Chrome

גרסה 117 של Chrome

גרסה 116 של Chrome

Chrome 115

Chrome 114

גרסה 113 של Chrome

גרסה 112 של Chrome

גרסה 111 של Chrome

Chrome 110

Chrome 109

גרסה 108 של Chrome

גרסה 107 של Chrome

Chrome 106

Chrome 105

Chrome 104

גרסה 103 של Chrome

גרסה 102 של Chrome

גרסה 101 של Chrome

Chrome 100

גרסה 99 של Chrome

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

גרסה 92 של Chrome

גרסה 91 של Chrome

Chrome 90

גרסה 89 של Chrome

גרסה 88 של Chrome

גרסה 87 של Chrome

גרסה 86 של Chrome

גרסה Chrome 85

גרסה 84 של Chrome

גרסה 83 של Chrome

גרסה 82 של Chrome

Chrome 82 בוטל.

גרסה 81 של Chrome

גרסה 80 של Chrome

גרסה 79 של Chrome

גרסה 78 של Chrome

גרסה 77 של Chrome

גרסה 76 של Chrome

גרסה 75 של Chrome

גרסה 74 של Chrome

גרסה 73 של Chrome

גרסה 72 של Chrome

גרסה 71 של Chrome

גרסה 70 של Chrome

גרסה Chrome 68

Chrome גרסה 67

Chrome 66

גרסה Chrome 65

Chrome 64

Chrome 63

גרסה 62 של Chrome

גרסה 61 של Chrome

Chrome 60

Chrome 59