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

Jecelyn Yeen

ייבוא וייצוא של תהליכים מוקלטים של משתמשים כקובץ JSON

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

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

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

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

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

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

בעיה ב-Chromium: 1257499

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

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

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

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

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

בעיה ב-Chromium: 1240596

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

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

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

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

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

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

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

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

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

פרטים שונים

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

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

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

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

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

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

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

בעיה ב-Chromium: 772558

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

כדאי להשתמש ב-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