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

Sofia Emelianova
Sofia Emelianova
GitHub

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

בחלונית Elements יש עכשיו תמיכה בכלל כרוכית CSS‏@property. הוא מאפשר להגדיר מאפייני CSS מותאמים אישית באופן מפורש ולרשום אותם בגיליון סגנונות בלי להריץ JavaScript.

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

בעיות ב-Chromium: ‏ 1471102, ‏ 1471103, ‏ 1471105.

שיפורים נוספים בהחרגות מקומיות

בהמשך לרצף השיפורים בגרסה הקודמת, השינויים המקומיים מבצעים עכשיו את הפעולות הבאות:

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

    תיבת הדו-שיח שמובילה לקוד המקורי במקום לקובץ הממופה למקור.

  • לחלונית Network נוספת העמודה Has overrides (יש שינויים שמוגדרים כברירת מחדל) והמסנן התואם has-overrides:[content|headers|yes|no]. כדי להציג את העמודה כולל שינויים מברירת המחדל, לוחצים לחיצה ימנית על כותרת הטבלה ובוחרים בה.

    סינון לפי הערך 'has-overrides:yes' בעמודה 'כולל ביטולים'.

  • בקטע מקורות > עקיפות, אפשרות התפריט Delete all overrides (מחיקה של כל העקיפות) הוחלפה באפשרות Delete (מחיקה) עם התנהגות מדויקת.

    לפני ואחרי ההחלפה של 'מחיקת כל השינויים' ב'מחיקה'.

האפשרות הקודמת Delete all overrides (מחיקת כל השינויים) הייתה מבלבלת כי היא מחקתה רק את השינויים הפעילים בסשן הנוכחי, שסומנו בסמל הנקודה הסגולה נשמרו..

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

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

בעיות ב-Chromium: 1472952, ‏ 1416338, ‏ 1472580, ‏ 1473681 1475668.

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

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

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

לבסוף, החיפוש תומך עכשיו בהוספה לרשימת התעלמות, ולא יוצגו תוצאות מקבצים שהוספו לרשימת התעלמות.

בעיות ב-Chromium: ‏ 1468875, ‏ 1472019.

חלונית מקורות משופרת

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

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

  • עקביות בשמות. השינוי הבולט ביותר הוא ששמו של החלונית Sources‏ > Filesystem השתנה ל-Workspace. טקסטים שונים בממשק המשתמש בחלונית הזו ברורים יותר עכשיו וחסרים בהם ביטויים מיותרים.
  • הגדרה משופרת. מוצגות לכם הנחיות טובות יותר לגבי גרירה ושחרור של תיקיות, או לחיצה על קישור כדי לבחור תיקייה.

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

אתם יכולים לראות את תהליך ההגדרה והעבודה החדשים בפעולה:

בעיות ב-Chromium: 1473771, 1473880, 1473963, 1474686, 1474687.

סידור מחדש של החלונות ב'מקורות'

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

בעיות ב-Chromium: 1473758.

הדגשת תחביר והדפסה יפה של סקריפטים לסוגי סקריפטים נוספים

בחלונית מקורות יש עכשיו אפשרות:

  • הדפסה יפה של JavaScript בשורה אחת בתוך סוגי הסקריפטים הבאים: module, ‏ importmap, ‏ speculationrules.
  • הדגשת התחביר של סוגי הסקריפטים importmap ו-speculationrules, ששניהם מכילים JSON.

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

מידע נוסף על כללי השערה זמין במאמר עיבוד מראש של דפים ב-Chrome לניווט מיידי בדפים.

בעיה ב-Chromium: 1473875.

יצירת אמולציה של תכונת המדיה prefers-reduced-transparency

גרסה 118 של Chrome תומכת עכשיו בתכונה prefers-reduced-transparency של מדיה. התכונה הזו מאפשרת למפתחים להתאים את התוכן מהאינטרנט להעדפה שבחר המשתמש, כדי לשפר את השקיפות במערכת ההפעלה, כמו ההגדרה הפחתת השקיפות ב-macOS.

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

בעיה ב-Chromium: 1424879.

Lighthouse 11

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

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

בעיה ב-Chromium: 772558.

שיפורי נגישות

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

  • סקירה כללית על CSS: משתמשים בחצים למעלה ולמטה כדי לנווט בין הקטעים בסרגל הצד הימני.
  • זיכרון: בסרגל הצד שמימין, מתמקדים בלחצן שמירה ליד תמונות מצב באמצעות Tab ומקישים על Enter כדי לבחור תיקייה.

בנוסף, תוקנו כמה בעיות בהודעות של קורא המסך.

בעיות ב-Chromium: 1470401, ‏ 1471301, ‏ 1474108, ‏ 1468631.

פרטים שונים

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

  • רשת: סמלים חדשים לסוגי משאבים פופולריים: media, ‏ wasm, ‏ websocket, ‏ manifest, ‏ fetch/xhr, ‏ json (1466298).
  • עדכוני צבע לצבעים של Material 3 ברכיבים רבים בממשק המשתמש, במיוחד בחלוניות Elements ו-Performance (1456690, 1472243).
  • בעיות שקשורות לקובצי cookie נשמרות עכשיו במהלך ניווטים (1466601).
  • שיפורים שונים בדף Application‏ > Preloading, בעיקר רשתות שניתן למיין ופרטי קבוצות כללים ששונו (1410709).
  • שיפורים שונים בעורך הפקודות ב-Protocol monitor, בעיקר אזהרות על קלט שגוי, עריכה של פקודה שנשלחה, עורך לפרמטרים של אובייקטים ללא מפתחות מוגדרים מראש, תמיכה ב-enums שלא מוגדרים על ידי הפניות, אובייקטים ללא הפניה לסוג, סינון פקודות לפי התאמות של מחרוזות משנה ועוד (1448050).
  • בתרשים הלהבות של הביצועים מופיעה מסגרת סביב התיבה של הסכום הכולל בתרשים העוגה (1470147).
  • במקורות המערכת לא מתייחסת עכשיו למקפים בתור תווי מילים ב-CSS (1471354).
  • עכשיו, השלמה אוטומטית תמיד ממיינת מילות מפתח לפי CSS בסוף.
  • מסנני RegEx תומכים עכשיו במרחבים (1346936).
  • תוקנה ב-Elements בעיה בזיהוי התכונות של שאילתות מדיה (1472693).

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

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

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

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

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

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