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

Jecelyn Yeen

כלי ההקלטה: אפשרויות להעתקה של שלבים, הפעלה חוזרת בדף, תפריט ההקשר של השלב

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

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

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

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

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

בעיות ב-Chromium: 1322313, 1351649, 1322313, 1339767

הצגת שמות הפונקציות בפועל בהקלטות של ביצועים

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

הצגת השוואה בין שמות הפונקציות לפני ואחרי השינוי בחלונית 'ביצועים'.

בדוגמה הזו, קובץ מקור מוקטן במהלך הייצור. לדוגמה, הפונקציה sayHi מצומצמת ל-n, והפונקציה takeABreak מצומצמת ל-o בהדגמה הזו.

הצגת קבצים לפני ואחרי המיזעור.

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

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

בעיות ב-Chromium: 1364601, 1364601

מקשי קיצור חדשים בחלונית המסוף והמקורות

אפשר לעבור בין הכרטיסיות בחלונית מקורות באמצעות: ב-MacOS, ‏ Function + Command + חץ למעלה ולמטה ב-Windows וב-Linux, ‏ Control + Page up או down

בנוסף, אפשר לנווט בהצעות להשלמה אוטומטית באמצעות Ctrl + N ו-Ctrl + P ב-MacOS, בדומה ל-Emacs. לדוגמה, אפשר להקליד window. בConsole ולהשתמש במקשי הקיצור האלה כדי לנווט.

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

בעיה ב-Chromium: 1167965, ‏ 1172535, ‏ 1371585. 1369503

שיפור בניפוי באגים ב-JavaScript

הנה כמה שיפורים בניפוי באגים ב-JavaScript בגרסה הזו:

  • ‫new.target הוא מאפיין meta שמאפשר לזהות אם פונקציה או constructor נקראו באמצעות האופרטור new. עכשיו אפשר לרשום new.target במסוף כדי לבדוק את הערך שלו במהלך ניפוי הבאגים. בעבר, אם הייתם מזינים new.target, המערכת הייתה מחזירה שגיאות. הצגת השוואה בין לפני ואחרי של ניפוי באגים בהערכת new.target.
  • אובייקט WeakRef מאפשר לכם להחזיק הפניה חלשה לאובייקט אחר, בלי למנוע את איסוף האשפה של האובייקט הזה. במהלך ניפוי באגים, כלי הפיתוח מציג עכשיו תצוגה מקדימה מוטבעת של הערך ומבצע הערכה של ההפניה החלשה ישירות במסוף. בעבר, כדי לפתור את הבעיה, היה צריך להפעיל במפורש את הפונקציה deref. הצגת השוואה לפני ואחרי הערכה של WeakRef במהלך ניפוי הבאגים.
  • תוקנה תצוגה מקדימה מוטבעת של משתנה מוצלל. בעבר, ערך התצוגה היה שגוי. הצגת תצוגה מקדימה מוטבעת של השוואה בין לפני ואחרי למשתנה מוצל.
  • הסרת טשטוש של שמות משתנים בפונקציות Generator ו-async בחלונית Scope (היקף) בחלונית Sources (מקורות).

בעיות ב-Chromium: 1267690, ‏ 1246863 1371322, ‏ 1311637

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

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

  • תמיכה בהצעות נוספות למאפייני CSS לא פעילים בחלונית Styles – גובה ורוחב מוטבעים, מאפייני flex ו-grid. (1373597, 1178508, 1178508,1178508)
  • תוקנה הדגשת התחביר. הוא לא פעל כמו שצריך מאז השדרוג האחרון של עורך הקוד בכלי הפיתוח. (1290182)
  • תיעוד נכון של אירועי שינוי קלט אחרי אירוע on blur בכלי התיעוד. (1378488)
  • עדכון סקריפט ההפעלה מחדש של Puppeteer בייצוא כדי לשפר את חוויית הניפוי באגים בכלי ההקלטה. (1351649)
  • תמיכה בהקלטה ובהפעלה מחדש במכשיר ההקלטה לניפוי באגים מרחוק. (1185727)
  • תוקן ניתוח של שמות משתנים מיוחדים ב-CSS ב-var(). בעבר, כלי DevTools לא תמכו בניתוח משתנים עם תווים שמוגדרים כ-escaped, כמו var(--fo\ o). , (1378992)

[ניסוי] חוויית משתמש משופרת בניהול נקודות עצירה

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

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

אלה כמה מהשינויים הבולטים:

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

אפשר לקרוא את השינויים המלאים בRFC (סגור) שלנו ולשלוח משוב כאן.

הצגת החלונית Breakpoint לפני ואחרי העיצוב מחדש.

בעיות ב-Chromium: 1346231, ‏ 1324904

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

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

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

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

בעיה ב-Chromium: ‏ 1164184

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

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

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

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

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

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

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