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

Jecelyn Yeen

ניקוי חלונית הביצועים בטעינה מחדש

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

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

ניקוי חלונית הביצועים בטעינה מחדש.

בעיות ב-Chromium: 1101268, 1382044

עדכונים לגבי מכשיר ההקלטה

הצגה והדגשה של הקוד של תהליך המשתמש בכלי התיעוד

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

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

תצוגת הקוד בכלי התיעוד.

בעיה ב-Chromium: ‏ 1385489

התאמה אישית של סוגי הבוררים בהקלטה

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

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

בעיה ב-Chromium: 1384431

עריכת מסלול המשתמש באפליקציה במהלך ההקלטה

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

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

בעיה ב-Chromium: 1381971

הדפסה יפה אוטומטית במקום

בחלונית מקורות, קובצי מקור מוקטנים מודפסים עכשיו במקום באופן אוטומטי. כדי לבטל את הפעולה, לוחצים על הלחצן pretty print (הדפסה יפה) { }.

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

הצגת קובץ מוקטן לפני ואחרי הדפסה יפה אוטומטית במקום.

בעיות ב-Chromium: 1383453, ‏ 1382752, ‏ 1382397

הדגשת תחביר משופרת ותצוגה מקדימה מוטמעת עבור Vue, ‏ SCSS ועוד

בחלונית מקורות שופר הסימון של תחביר בכמה פורמטים נפוצים של קבצים, כך שקל יותר לקרוא את הקוד ולזהות את המבנה שלו, כולל Vue,‏ JSX,‏ Dart,‏ LESS,‏ SCSS,‏ SASS ו-CSS מוטבע.

הדגשת תחביר ב-Vue.

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

תצוגה מקדימה מוטבעת ל-Vue.

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

קישור למפת מקור של SASS.

בעיות ב-Chromium: 1385374, ‏ 1385632, ‏ 1385281, ‏ 1385269, ‏ 1383892, ‏ 1361862, ‏ 1383451, ‏ 1392106, ‏ 1149734

השלמה אוטומטית ארגונומית ועקבית במסוף

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

  • האפליקציה Tab תמיד משמשת להשלמה אוטומטית.
  • ההתנהגות של Arrow right ושל Enter משתנה בהתאם להקשר.
  • חוויית ההשלמה האוטומטית עקבית בכל עורכי הטקסט, בחלוניות Console,‏ Sources ו-Elements

לדוגמה, זה מה שקורה כשמקלידים cons במסוף:

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

  • המסוף מריץ את השורה כשלוחצים על Enter. בעבר, המערכת הייתה משלימה אוטומטית את השורה עם ההצעה המובילה. כדי להשלים אוטומטית, מקישים על Tab או על Arrow Right. השורה מופעלת כשלוחצים על Enter.

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

  • כדי להשלים אוטומטית את האפשרות שנבחרה במהלך הניווט, משתמשים במקשי המקלדת Tab, Enter או Arrow Right. השלמה אוטומטית עם האפשרות שנבחרה במהלך הניווט.

  • כשעורכים באמצע קוד, למשל כשהסמן נמצא בין n ל-s, משתמשים ב-Tab להשלמה אוטומטית, ב-Enter להרצת השורה וב-Arrow Right להזזת הסמן קדימה. עריכה באמצע הקוד.

בעיות ב-Chromium: 1399436, ‏ 1276960

מידע חשוב נוסף

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

  • נפתרה בעיה של רגרסיה ב-DevTools, שגרמה לכך שהכלי לא עצר בהצהרה debugger בסקריפטים מוטבעים. (1385374)
  • הגדרה חדשה Console שמאפשרת להרחיב או לכווץ הודעות console.trace() כברירת מחדל. משנים את ההגדרות דרך הגדרות > העדפות > הרחבת הודעות מסוג console.trace() כברירת מחדל. (1139616)
  • בחלונית Snippets בחלונית Sources יש השלמה אוטומטית משופרת, בדומה לConsole. (772949) השלמה אוטומטית בקטעי מידע.

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

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

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

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

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

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