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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1385489

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

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

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

בעיה ב-Chromium: 1384431

עריכת מסלול משתמש בזמן ההקלטה

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

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

בעיה ב-Chromium: 1381971

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

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

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

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

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

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

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

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

בנוסף, שיפרנו את התצוגה המקדימה בשורה ב-DevTools עבור 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

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

  • אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
  • אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
  • שולחים ציוץ אל ‎@ChromeDevTools.
  • להשאיר תגובות בסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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