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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

רגעי שיא שונים

ריכזנו כאן כמה תיקונים חשובים בגרסה הזו:

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

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1164184

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

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

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

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

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

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