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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1175722

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

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

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

לדוגמה, קטע הקוד שבהמשך יוצר אובייקט 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 שפות אחרות – רוסית, סינית, ספרדית, יפנית, פורטוגזית וקוריאנית דרך הכרטיסייה 'מה חדש'.

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

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

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

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

האם היה קשה לחפש קובץ בתפריט הפקודה? יש לנו חדשות טובות: ממשק המשתמש של תפריט הפקודות עבר שיפור.

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

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

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

בעיה ב-Chromium: 1201997

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

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

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

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

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

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