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

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

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

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

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

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

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

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