דף זה תורגם על ידי Cloud Translation API.

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

Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

חיפוש משופר

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

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

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

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

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

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

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

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

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

באמצעות מקורות > 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 שקשורים לכלי פיתוח.