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

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

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1175722

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

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

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

לדוגמה, קטע הקוד הבא יוצר אובייקט URLlink עם 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

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

  • אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
  • אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
  • שולחים ציוץ אל ‎@ChromeDevTools.
  • אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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