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

Jecelyn Yeen

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

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

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

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

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

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

הצגה והדגשה של הקוד של תהליך המשתמש ב-Recorder

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

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

תצוגת הקוד ב-Recorder.

בעיה ב-Chromium: 1385489

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

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

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

בעיה ב-Chromium: 1384431

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

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

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

בעיה ב-Chromium: 1381971

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

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

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

לדוגמה, זה מה שקורה כשמקלידים 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.trace() כברירת מחדל. משנים את ההגדרות דרך הגדרות > העדפות > הרחבת ההודעות של console.trace() כברירת מחדל. (1139616)
  • בחלונית קטעי קוד שבחלונית מקורות יש תמיכה במילוי אוטומטי משופר, בדומה למסוף. (772949) השלמה אוטומטית בקטעי קוד.

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.