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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

עוד שיפורים בשינויים מקומיים מברירת המחדל

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שיפורים בחלונית 'מקורות'

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

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

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

Sources > Workspace (מקורות > סביבת עבודה) מאפשר לסנכרן שינויים שאתם מבצעים בכלי הפיתוח ישירות עם קובצי המקור.

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

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

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

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

בעיות ב-Chromium: 1473758.

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

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

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

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

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

בעיה ב-Chromium: ‏ 1473875.

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

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

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

בעיה ב-Chromium: ‏ 1424879.

Lighthouse 11

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

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

בעיה ב-Chromium: ‏ 772558.

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

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

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

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

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

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

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

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

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

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

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

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

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

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