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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

שיפורים נוספים בשינויים מקומיים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

התכונה workspace בחלונית Sources (מקורות) עוברת עיצוב חדש ויעיל:

  • עקביות בשמות. השינוי הבולט ביותר הוא ששמו של החלונית 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 של מדיה. התכונה הזו מאפשרת למפתחים להתאים את תוכן האינטרנט להעדפות של המשתמשים לגבי שקיפות מופחתת במערכת ההפעלה, כמו ההגדרה Reduce transparency ב-macOS.

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

בעיה ב-Chromium: ‏ 1424879.

Lighthouse 11

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

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

בעיה ב-Chromium: ‏ 772558.

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

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

  • סקירה כללית על CSS: משתמשים בחצים למעלה ולמטה כדי לנווט בין הקטעים בסרגל הצד הימני.
  • זיכרון: בסרגל הצד ימין, ממקדים את הלחצן שמירה לצד קובצי snapshot באמצעות 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 ממוינות בסוף ההשלמה האוטומטית.
  • מסנני ביטויים רגולריים תומכים עכשיו במרווחים (1346936).
  • תוקנה ב-Elements בעיה בזיהוי התכונות של שאילתות מדיה (1472693).

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

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

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

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

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

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