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

Jecelyn Yeen

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

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

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

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

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

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