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

מה חדש ב-Lighthouse 8.4 – מידע נוסף על העדכונים.

הביקורת של LCP טעון באיטרציה בדוח Lighthouse

בעיה ב-Chromium: 772558

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

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

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

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

בעיה ב-Chromium: 1243976

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1201997

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.