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

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

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

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

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

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

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

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

  

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

  

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

  

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

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

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

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

חיפוש משופר

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

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

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

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

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

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

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

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

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

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

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

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

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

בעיות ב-Chromium: 1473758.

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

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

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

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

בעיה ב-Chromium: 1473875.

אמולציה של תכונת מדיה עם שקיפות והעדפה לצמצום

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

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

בעיה ב-Chromium: 1424879.

מגדלור 11

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

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

בעיה ב-Chromium: 772558.

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

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

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

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

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

פרטים שונים

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

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

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

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

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

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

• אפשר לשלוח לנו הצעה או משוב דרך crbug.com.
• כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות   > עזרה > דיווח על בעיות בכלי הפיתוח ב'כלי פיתוח'.
• שליחת ציוץ אל @ChromeDevTools.
• נשמח לשמוע מה חדש בסרטונים ב-YouTube של כלי הפיתוח או בסרטונים ב-YouTube שקשורים לכלי פיתוח.

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

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