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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

בעיה ב-Chromium: 1442536.

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

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

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

בעיה ב-Chromium: ‏ 1204932.

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

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

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

צוות כלי הפיתוח רוצה להודות ל-一丝 ול-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 (הקלטה מספר N) > Performance insights panel (חלונית התובנות לגבי הביצועים) (1414773).
  • גיליונות סגנונות שלא נטענו מוסתרים עכשיו מעץ הניווט (1386059).
  • ביצועים: תוקנה הצגה שגויה של טראק האינטראקציות שניתן להרחיב (1432510).
  • רכיבים: גיליונות סגנונות שלא נטענו מסומנים עכשיו בקו תחתון גלי (1440626).
  • Debugger לא נכנס אוטומטית ל-WebAssembly כשאין פלאגין לשפה הרלוונטית (1443342).
  • הקיצור להזזת הסמן מילה אחת בכל פעם שוחזר לקובצי CSS במקורות > עורך (1241848):
    • ‫MacOS: ‏ Alt + חץ
    • Windows/Linux: ‏ Ctrl + חץ

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

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

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

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

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

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