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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

תג התת-מרכב ושכבת-העל באזור התצוגה.

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

בעיה ב-Chromium: ‏ 1442536.

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

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

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

בעיה ב-Chromium: ‏ 1204932.

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

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

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

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

בעיה ב-Chromium: ‏ 1380779.

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

הדגשת תחביר CSS

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1405767.

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

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

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

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

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

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

בעיה ב-Chromium: 1432303.

Lighthouse 10.2.0

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

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

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

בעיה ב-Chromium: ‏ 772558.

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

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

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

  • הכלי לניפוי באגים מתעלם מסקריפטים כאלה ולא נעצר בגלל חריגים שהם גורמים להם.
  • בחלונית מקורות > Call Stack, המערכת מדלגת על פריימים שנדחו. כדי להשבית את הדילוג כאן, מסמנים את האפשרות תיבת סימון. הצגת מסגרות שכלולות ברשימת קטעי הקוד להתעלמות.
  • המסוף מקפל מסגרות שנדחו בנתוני מעקב הסטאק. לוחצים על הצגת N פריימים נוספים כדי להרחיב את התצוגה, ועל הצגת פחות כדי לכווץ אותה שוב.

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

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

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

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

בחלונית Network‏ > Response, הגוף של התשובות הממוזערות מודפס עכשיו באופן יפה כברירת מחדל, בדומה לחלונית Sources.

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

בנוסף, קבצי 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

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

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

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