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

Jecelyn Yeen

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1257499

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

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

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

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

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

בעיה ב-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 (Options) לבחירה מרובה בחלונית מקורות. (1304070)

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

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

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

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

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

בעיה ב-Chromium: ‏ 772558

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

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

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

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

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

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