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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

אלה חלק מהעדכונים העיקריים:

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

אפשר לקרוא את השינויים המלאים ב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.

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

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