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

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

Sofia Emelianova

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

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

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

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

שיפורים נוספים של ביטולים מקומיים

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

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

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

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

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

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

חיפוש משופר

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

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

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

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

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

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

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

הפיצ'ר של Workspace בחלונית מקורות התייעל:

בחירת שמות עקביים. השם הבולט ביותר של החלונית מקורות > מערכת קבצים השתנה ל-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).
שיפורים שונים ב-Application > טעינה מראש, במיוחד רשתות שניתן למיין אותן ופרטים מתוקנים של קבוצת כללים (1410709).
שיפורים שונים בעורך הפקודות במעקב אחר פרוטוקול, במיוחד אזהרות על קלט שגוי, עריכת פקודה שנשלחה, עורך פרמטרים של אובייקטים ללא מקשים מוגדרים מראש, תמיכה בספירות עם טיפוסים שלא מוגדרים על ידי הפניות, אובייקטים ללא הפניה לסוג, פקודות סינון לפי התאמות של מחרוזות משנה ועוד (1448050).
תרשים להבות ביצועים מקבל גבול מסביב לקופסה הכוללת בתרשים העוגה (1470147).
מעכשיו, הקטע מקורות לא מתייחס למקפים כתווי מילים ב-CSS (1471354).
עכשיו ההשלמה האוטומטית תמיד ממיינת מילות מפתח בהתאמה ל-CSS בסוף.
מסנני ביטוי רגולרי (regex) תומכים עכשיו ברווחים (1346936).
זיהוי קבוע של תכונות של שאילתות מדיה רכיבים (1472693).

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

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

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

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

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