מה חדש בכלי הפיתוח (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 > Filesystem שונה ל-Workspace. הטקסטים השונים בממשק המשתמש בחלונית הזו ברורים יותר ועכשיו הם לא חוזרים על עצמם.
  • הגדרה משופרת. אפשר לראות רמזים טובים יותר לגבי גרירה ושחרור של תיקיות, או ללחוץ על קישור כדי לבחור תיקייה.

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).
  • בעיות שומרת עכשיו בעיות שקשורות לקובצי Cookie במהלך הניווט (1466601).
  • שיפורים שונים בApplication > Preloading, בעיקר רשתות שניתנות למיון ופרטים מעודכנים של קבוצת כללים (1410709).
  • שיפורים שונים בכלי לעריכת פקודות בכלי המעקב אחר פרוטוקולים, בעיקר אזהרות על קלט שגוי, עריכת פקודה שנשלחה, כלי לעריכת פרמטרים של אובייקטים ללא מפתחות מוגדרים מראש, תמיכה ב-enums שלא מוגדרים על ידי הפניות, אובייקטים ללא הפניה לסוג, סינון פקודות לפי התאמות של מחרוזות משנה ועוד (1448050).
  • בתרשים הלהבה ביצועים, נוסף גבול סביב התיבה של הסכום הכולל בתרשים העוגה (1470147).
  • ב-Sources, מקפים לא נחשבים יותר לתווים במילים ב-CSS (1471354).
  • ההשלמה האוטומטית תמיד ממיינת עכשיו מילות מפתח לפי CSS בסוף.
  • מסנני RegEx תומכים עכשיו ברווחים (1346936).
  • Elements fixed media query feature detection (1472693).

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

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

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

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

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

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