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

Sofia Emelianova
Sofia Emelianova
GitHub

שיפורים ברכיבים

תג חדש של רשת משנה בשירות CSS

בחלונית Elements מופיע תג חדש subgrid עבור subgrid. התכונה הזו היא כרגע ניסיונית ב-Chrome Canary.

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

התג של רשת המשנה ושכבת העל בחלון התצוגה.

רשימה של כל התגים בחלונית Elements זמינה במאמר Badges reference.

בעיה ב-Chromium: ‏ 1442536.

הסבר קצר על בורר

בקטע Elements (רכיבים) > Styles (סגנונות), מעבירים את העכבר מעל שם של בורר כדי לראות את משקל הספציפיות שלו בתיאור קצר.

הסבר קצר עם משקל הספציפיות של בורר.

בעיה ב-Chromium: ‏ 1204932.

ערכים של מאפייני CSS בהתאמה אישית בהסברים קצרים

בקטע Elements (רכיבים) > Styles (סגנונות), מעבירים את העכבר מעל שם של מאפיין CSS בהתאמה אישית כדי לראות את הערך שלו בתיאור קצר.

הערך של מאפיין ה-CSS המותאם אישית שמופיע בתיבת הטיפ.

צוות DevTools רוצה להודות ל-一丝 ול-Suyan על השיפור הזה.

בעיה ב-Chromium: ‏ 1380779.

שיפורים במקורות

הדגשת תחביר CSS

בחלונית Sources מוצגים הנתונים הבאים לגבי קובצי CSS שעברו עיבוד מראש, כמו SASS,‏ SCSS ו-LESS:

  • הדגשת תחביר.
  • תמיכה בעורכים בגוף הטקסט. העורכים האלה דומים לאלה שמופיעים בElements > Styles, לדוגמה, Color Picker ו-Easing Editor.

שיפור בהדגשת התחביר של CSS ותמיכה בעורכים מוטבעים ב-Sources.

בעיות ב-Chromium: ‏ 1302261, ‏ 1392085.

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

עכשיו אפשר להגדיר נקודות עצירה מותנות מהר יותר באמצעות קיצור דרך. כדי לפתוח את תיבת הדו-שיח של נקודת עצירה, לוחצים לחיצה ארוכה על Command (ב-MacOS) או על Control (ב-Windows או ב-Linux) ולוחצים על מספר השורה בעמודה הימנית של מקורות > עורך.

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

בעיה ב-Chromium: ‏ 1405767.

אפליקציה > הקלות במעקב אחר עזיבה מהדף הראשון

הניסוי Bounce Tracking Mitigations ב-Chrome מאפשר לזהות ולמחוק את הנתונים של אתרים שנראה שמבצעים מעקב באתרים שונים באמצעות טכניקת מעקב ההפניות. בחלונית Application > Background Services נוספה כרטיסייה חדשה, Bounce Tracking Mitigations, שמאפשרת להפעיל ידנית אמצעים לצמצום מעקב אחר ניתובים חוזרים, ומציגה רשימה של האתרים שהמצבים שלהם נמחקו.

כדאי לנסות את תכונת האבטחה הזו:

  1. חסימת קובצי Cookie של צד שלישי ב-Chrome עוברים אל תפריט שלוש הנקודות. > הגדרות > אבטחה. פרטיות ואבטחה > קובצי Cookie ונתונים נוספים מאתרים > כפתור הבחירה מסומן. חסימת קובצי Cookie של צד שלישי ומפעילים את האפשרות.
  2. ב-chrome://flags, מגדירים את הניסוי Bounce Tracking Mitigations לערך Enabled With Deletion.
  3. בודקים את דף ההדגמה, פותחים את Application > Background Services > Bounce Tracking Mitigations, לוחצים על קישור להפניה חוזרת בדף, מחכים (10 שניות) עד ש-Chrome יתעד את ההפניה החוזרת ולוחצים על Force run כדי למחוק את הסטטוס באופן מיידי.

ב-Bounce Tracking Mitigations (הקלות במעקב אחר עזיבה מהדף הראשון) מופיעה רשימה של מחיקות מצב.

בנוסף, בכרטיסייה בעיות מוצגת אזהרה לגבי מחיקת המצב הקרובה.

בעיה ב-Chromium: 1432303.

‫Lighthouse 10.2.0

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

טבלת השלבים של LCP.

כדי ללמוד את היסודות של השימוש בחלונית Lighthouse בכלי הפיתוח, אפשר לעיין במאמר Lighthouse: אופטימיזציה של מהירות האתר.

בעיה ב-Chromium: 772558.

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

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

כשההגדרה הזו מופעלת:

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

בנוסף, הטקסט בתיבות הסימון ברשימת ההתעלמות ברור יותר.

בעיות ב-Chromium: 1440958, ‏ 1364501.

רשת > הדפסה מעוצבת של תגובות כברירת מחדל

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

הפעלנו הדפסה יפה בחלון התגובה בכרטיסייה 'רשת'.

בנוסף, קובצי SVG מקבלים הדגשה של התחביר.

הדגשת תחביר של SVG.

בעיות ב-Chromium: 1382752, ‏ 1385374.

מידע חשוב נוסף

אלה כמה מהתיקונים והשיפורים החשובים בגרסה הזו:

  • ‫הגדרות. הגדרות > מכשירים: נוסף Facebook for Android v407 on Pixel 6 לרשימת מחרוזות הסוכן.
  • רשת: נוסף קיצור הדרך ניקוי יומן הרשת (1444991):
    • ‫MacOS: ‏ Command + K
    • ‫Windows/Linux: ‏ Control + L
  • הוסרה האפשרות בתפריט הנפתח Recorder > Recording N > Performance insights panel (1414773).
  • גיליונות סגנונות שלא נטענו מוסתרים עכשיו מעץ הניווט (1386059).
  • ביצועים: תוקנה הצגה שגויה של טראק האינטראקציות שניתן להרחיב (1432510).
  • רכיבים: גיליונות סגנונות שלא נטענו מסומנים עכשיו בקו תחתון גלי (1440626).
  • הכלי לניפוי באגים לא נכנס אוטומטית ל-WebAssembly כשאין פלאגין לשפה הרלוונטית (1443342).
  • הקיצור להזזת הסמן מילה אחת בכל פעם שוחזר לקובצי CSS במקורות > עורך (1241848):
    • ‫MacOS: ‏ Alt + חץ
    • ‫Windows/Linux: ‏ Ctrl + חץ

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

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

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

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

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

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