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

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

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

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

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

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

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

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

  

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

  

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

  

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

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

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

בעיות ב-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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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