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

Jecelyn Yeen

כלים חדשים ליצירת אורך CSS

כלי הפיתוח הוסיפו דרך גמישה וקלה יותר לעדכן אורכים ב-CSS.

בחלונית סגנונות, מחפשים מאפיין CSS באורך (למשל height, padding).

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

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

עדיין תוכל לערוך את ערך היחידה כטקסט - פשוט לוחצים על הערך ומתחילים לערוך.

בעיות ב-Chromium: 1126178, 1172993

הסתרה של בעיות בכרטיסייה 'בעיות'

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

בכרטיסייה 'בעיות', מעבירים את העכבר מעל הבעיה שרוצים להסתיר. לוחצים על אפשרויות נוספות   עוד > הסתרת בעיות כאלה.

הסתרת תפריט הבעיות

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

חלונית בעיות מוסתרת

בעיה ב-Chromium: 1175722

שופרה התצוגה של הנכסים

כלי הפיתוח משפרים את הצגת הנכסים על ידי:

  • תמיד צריך להדגיש ולמיין את המאפיינים של עצמם קודם בחלונית המסוף, בחלונית Sources ובחלונית Properties.
  • צריך לשטח את הצגת המאפיינים בחלונית Properties (מאפיינים).

לדוגמה, קטע הקוד שבהמשך יוצר אובייקט URL link עם 2 נכסים משלו: user ו-access, ומעדכן את הערך של הנכס שעבר בירושה search.

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

כדאי לנסות לרשום את link במסוף. נכסים שבבעלותכם מופיעים עכשיו מודגשים וממוינים ראשונים. בעזרת השינויים האלה, קל יותר לזהות נכסים מותאמים אישית, במיוחד נכסים של Web APIs (למשל URL), עם הרבה נכסים שעברו בירושה.

נכסים בבעלות מודגשים וממוינים ראשונים

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

איחוד מאפיינים

בעיות ב-Chromium: 1076820, 1119900

Lighthouse גרסה 8.4 בחלונית Lighthouse

בחלונית Lighthouse פועלת עכשיו Lighthouse גרסה 8.4. עכשיו מערכת Lighthouse תזהה אם האלמנט המהירות שבה נטען רכיב התוכן הכי גדול (LCP) הייתה תמונה שנטענה באופן מדורג, ומומלץ להסיר ממנה את המאפיין loading.

פרטים נוספים על העדכונים זמינים במאמר מה חדש ב-Lighthouse 8.4.

ביקורת LCP שנטענה באופן מדורג בדוח Lighthouse

בעיה ב-Chromium: 772558

מיון קטעי המידע בחלונית 'מקורות'

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

אפשר להשתמש בתכונת קטעי הקוד כדי להריץ פקודות מהר יותר. כדאי לצפות בסרטון הזה לקבלת טיפ!

מיון קטעי המידע בחלונית 'מקורות'

בעיה ב-Chromium: 1243976

קישורים חדשים לנתוני גרסה מתורגמים ולדיווח על באג בתרגום

עכשיו אפשר ללחוץ כדי לקרוא את נתוני הגרסה של כלי הפיתוח ב-6 שפות אחרות – רוסית, סינית, ספרדית, יפנית, פורטוגזית וקוריאנית דרך הכרטיסייה 'מה חדש'.

החל מגרסה 94 של Chrome, אפשר להגדיר את השפה המועדפת בכלי הפיתוח. אם מצאת בעיות בתרגומים, אפשר לעזור לנו לשפר אותם על ידי דיווח על בעיה בתרגום דרך אפשרויות נוספות > עזרה > דיווח על באג בתרגום.

קישורים חדשים לנתוני גרסה מתורגמים ולדיווח על באג בתרגום

בעיות ב-Chromium: 1246245, 1245481

ממשק משתמש משופר לתפריט הפקודות של כלי הפיתוח

האם היה קשה לחפש קובץ בתפריט הפקודה? חדשות טובות, ממשק המשתמש של תפריט הפקודה משופר!

פותחים את תפריט הפקודה כדי לחפש קובץ עם מקשי הקיצור Control+P ב-Windows וב-Linux, או Command+P ב-MacOS.

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

תפריט הפקודה

בעיה ב-Chromium: 1201997

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

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

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

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

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

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

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