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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1385489

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

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

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

בעיה ב-Chromium: ‏ 1384431

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

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

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

בעיה ב-Chromium: ‏ 1381971

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

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

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

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

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

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

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

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

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

תצוגה מקדימה מוטבעת ל-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.

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

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