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

Jecelyn Yeen
Jecelyn Yeen

ייבוא וייצוא של תהליכי שימוש שתועדו כקובץ JSON

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

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

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

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

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

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

בעיה ב-Chromium: 1257499

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

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

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

לוחצים על שם השכבה כדי להציג את סדר השכבות. לשכבה 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 תומך עכשיו בשני מצבים נוספים למדידת תהליכי השימוש של המשתמשים – טווח זמן ותמונת מצב.

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

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

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

בעיה ב-Chromium: 772558

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

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

פנייה לצוות של כלי הפיתוח ל-Chrome

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

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

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