דף זה תורגם על ידי Cloud Translation API.

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

Jecelyn Yeen

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

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

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

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

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

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

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

דגשים שונים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1164184

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

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

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

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

שלחו לנו הצעה או משוב דרך crbug.com.
כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות > עזרה > דיווח על בעיות בכלי הפיתוח בכלי הפיתוח.
אפשר לשלוח ציוץ אל @ChromeDevTools.
אפשר לכתוב תגובות לגבי 'מה חדש' בסרטוני YouTube בכלי הפיתוח או בסרטונים ב-YouTube בקטע 'טיפים לשימוש בכלי הפיתוח'.