מה חדש בכלי הפיתוח (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 או למטה

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

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

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

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

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

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

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

פרטים שונים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1164184

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

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

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

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

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

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

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