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

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

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

בחלונית סגנונות, מחפשים מאפיין 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 במסוף. מעכשיו הנכסים שלכם מודגשים וממוינים קודם. השינויים האלה יעזרו לכם לזהות בקלות נכסים מותאמים אישית, במיוחד ב-Web APIs (למשל URL) עם נכסים רבים שעברו בירושה.

הנכסים שבבעלותכם מודגשים וממוינים קודם

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

שטח

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

מגדלור 8.4 בחלונית Lighthouse

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

פרטים נוספים על העדכונים זמינים במאמר What's new ב-Lighthouse 8.4.

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

בעיה ב-Chromium: 772558

מיון קטעי טקסט בחלונית 'מקורות'

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

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

מיון קטעי טקסט בחלונית 'מקורות'

בעיה ב-Chromium: 1243976

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1201997

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

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

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

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

  • שלחו לנו הצעה או משוב דרך crbug.com.
  • כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות   עוד   > עזרה > דיווח על בעיות בכלי הפיתוח בכלי הפיתוח.
  • אפשר לשלוח ציוץ אל @ChromeDevTools.
  • אפשר לכתוב תגובות לגבי 'מה חדש' בסרטוני YouTube בכלי הפיתוח או בסרטונים ב-YouTube בקטע 'טיפים לשימוש בכלי הפיתוח'.

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

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

Chrome 123

גרסה 122 של Chrome

גרסה 121 של Chrome

Chrome 120

גרסה 119 של Chrome

גרסה 118 של Chrome

גרסה 117 של Chrome

גרסה 116 של Chrome

Chrome 115

Chrome 114

גרסה 113 של Chrome

גרסה 112 של Chrome

גרסה 111 של Chrome

Chrome 110

Chrome 109

גרסה 108 של Chrome

גרסה 107 של Chrome

Chrome 106

Chrome 105

Chrome 104

גרסה 103 של Chrome

גרסה 102 של Chrome

גרסה 101 של Chrome

Chrome 100

גרסה 99 של Chrome

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

גרסה 92 של Chrome

גרסה 91 של Chrome

Chrome 90

גרסה 89 של Chrome

גרסה 88 של Chrome

גרסה 87 של Chrome

גרסה 86 של Chrome

גרסה Chrome 85

גרסה 84 של Chrome

גרסה 83 של Chrome

גרסה 82 של Chrome

Chrome 82 בוטל.

גרסה 81 של Chrome

גרסה 80 של Chrome

גרסה 79 של Chrome

גרסה 78 של Chrome

גרסה 77 של Chrome

גרסה 76 של Chrome

גרסה 75 של Chrome

גרסה 74 של Chrome

גרסה 73 של Chrome

גרסה 72 של Chrome

גרסה 71 של Chrome

גרסה 70 של Chrome

גרסה Chrome 68

Chrome גרסה 67

Chrome 66

גרסה Chrome 65

Chrome 64

Chrome 63

גרסה 62 של Chrome

גרסה 61 של Chrome

Chrome 60

Chrome 59