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

ייבוא וייצוא של תהליכי שימוש שתועדו כקובץ 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()

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

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

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

בעיות ב-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.