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

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

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

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