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

Jecelyn Yeen

כלים חדשים לעריכת אורך ב-CSS

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1175722

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

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

  • הנכסים שבבעלותכם תמיד יודגשו וימוינו ראשונים בחלונית Console, בחלונית Sources ובחלונית 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. נכסים בבעלותכם מודגשים עכשיו וממוינים ראשונים. השינויים האלה מקלים על זיהוי מאפיינים מותאמים אישית, במיוחד בממשקי API לאינטרנט (למשל URL) עם הרבה מאפיינים שעוברים בירושה.

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

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

השטחת מאפיינים

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

‫Lighthouse 8.4 בחלונית Lighthouse

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

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

ביקורת על LCP בטעינה עצלה בדוח Lighthouse

בעיה ב-Chromium: ‏ 772558

מיון נכסי המידע המובנה בחלונית המקורות

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

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

מיון נכסי המידע המובנה בחלונית המקורות

בעיה ב-Chromium: ‏ 1243976

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

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

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

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

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

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

היה לך קשה לחפש קובץ בתפריט הפקודות? חדשות טובות! ממשק המשתמש של תפריט הפקודות עבר שיפור.

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

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

תפריט הפקודות

בעיה ב-Chromium: ‏ 1201997

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

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

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

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

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

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