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

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

Kayce Basques

שלום! מה חדש בכלי הפיתוח ל-Chrome ב-Chrome 75.

גרסת וידאו של הדף הזה

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

חלק ממאפייני ה-CSS, כמו filter, מאפשרים להזין ערכים כפונקציות. לדוגמה, filter: blur(1px) מוסיף טשטוש של פיקסל אחד לצומת. כשמבצעים השלמה אוטומטית של מאפיינים כמו filter, כלי הפיתוח מאכלסים את הנכס בערך בעל משמעות, כך שאפשר לראות תצוגה מקדימה של סוג השינוי שיתבצע בערך בצומת.

ההתנהגות הישנה של ההשלמה האוטומטית.

איור 1. ההתנהגות הישנה של ההשלמה האוטומטית. כלי הפיתוח עוברים השלמה אוטומטית ל-filter: blur ולא רואים שינויים באזור התצוגה.

ההתנהגות החדשה של ההשלמה האוטומטית.

איור 2. ההתנהגות החדשה של ההשלמה האוטומטית. כלי הפיתוח עוברים השלמה אוטומטית ל-filter: blur(1px) והשינוי מופיע באזור התצוגה.

בעיה רלוונטית ב-Chromium: #931145

ניקוי נתוני האתר מתפריט הפקודה

מקישים על Control+Shift+P או Command+Shift+P (Mac) כדי לפתוח את תפריט Command, ולאחר מכן להריץ את הפקודה Clear Site Data כדי לנקות את כל הנתונים הקשורים לדף, כולל: Service works , localStorage, sessionStorage, IndexedDB, Web

הפקודה 'ניקוי נתוני אתר'.

איור 3. הפקודה ניקוי נתוני אתר.

ניתן לנקות את נתוני האתר דרך אפליקציה > ניקוי אחסון זמן מה. לתכונה החדשה ב-Chrome 75 יש אפשרות להריץ את הפקודה מתפריט הפקודה.

אם לא רוצים למחוק את כל נתוני האתרים, אפשר לקבוע אילו נתונים יימחקו דרך Application > Clear Storage.

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

איור 4. Application > פינוי נפח אחסון.

בעיה רלוונטית ב-Chromium: #942503

הצגת כל מסדי הנתונים של IndexedDB

בעבר, באמצעות Application > IndexedDB אפשר לבדוק מסדי נתונים של IndexedDB רק מהמקור הראשי. לדוגמה, אם היה בדף <iframe>, והקובץ <iframe> משתמש ב-IndexedDB, לא תוכלו לראות את מסדי הנתונים שלו. החל מגרסה 75 של Chrome, בכלי הפיתוח מוצגים מסדי נתונים מסוג IndexedDB לכל המקורות.

ההתנהגות הישנה. בדף מוטמעת הדגמה שמשתמשת ב-IndexedDB, אבל לא ניתן לראות מסדי נתונים.

איור 5. ההתנהגות הישנה. בדף מוטמעת הדגמה שמשתמשת ב-IndexedDB, אבל לא מוצגים מסדי נתונים.

ההתנהגות החדשה. מסדי הנתונים של ההדגמה גלויים.

איור 6. ההתנהגות החדשה. מסדי הנתונים של ההדגמה גלויים.

בעיה רלוונטית ב-Chromium: #943770

הצגת הגודל הלא דחוס של משאב כשמעבירים את העכבר מעליו

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

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

איור 7. מעבירים את העכבר מעל העמודה 'גודל' כדי לראות את הגודל הלא דחוס של המשאב.

בעיה רלוונטית ב-Chromium: #805429

נקודות עצירה מוטבעות בחלונית של נקודת עצירה

נניח שהוספתם נקודת עצירה (breakpoint) של שורת קוד לשורת הקוד הבאה:

document.querySelector('#dante').addEventListener('click', logWarning);

עד כה, כלי הפיתוח מאפשרים לציין מתי בדיוק יש להשהות בנקודת עצירה, באופן הבא: בתחילת השורה, לפני קריאת document.querySelector('#dante') או לפני קריאתה של addEventListener('click', logWarning). אם מפעילים את כל ה-3, למעשה יוצרים 3 נקודות עצירה. בעבר, החלונית Breakpoints לא אפשרה לנהל בנפרד את 3 נקודות העצירה (breakpoint). החל מגרסה 75 של Chrome, לכל נקודת עצירה מוטבעת יש ערך משלה בחלונית Breakpoints.

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

איור 8. ההתנהגות הישנה. יש רק רשומה אחת בחלונית Breakpoints.

ההתנהגות החדשה. בחלונית Breakpoints יש 3 רשומות.

איור 9. ההתנהגות החדשה. בחלונית Breakpoints יש 3 רשומות.

בעיה רלוונטית ב-Chromium: #927961

ספירת המשאבים של IndexedDB ו-cache

החלוניות IndexedDB ו-Cache מציינות עכשיו את המספר הכולל של המשאבים במסד נתונים או במטמון.

סך כל הרשומות במסד הנתונים של IndexedDB.

איור 10. סך כל הרשומות במסד הנתונים של IndexedDB.

בעיות רלוונטיות ב-Chromium: #941197, #930773, #930865

הגדרה להשבתה של הסבר קצר של הבדיקה המפורטת

נוספו ב-Chrome 73 הסברים קצרים ומפורטים במצב בדיקה.

הסבר קצר מפורט.

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

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

הסבר קצר קצר.

איור 12. הסבר קצר מינימלי שמציג רק רוחב וגובה.

בעיה רלוונטית ב-Chromium: #948417

הגדרה להחלפת כניסת כניסת כרטיסייה בעורך החלונית 'מקורות'

בבדיקת הנגישות גילינו שהייתה מלכודת כרטיסיות בעורך. אחרי שמשתמשי מקלדת עברו עם Tab ל-Editor, לא הייתה להם דרך לצאת ממנו כי המקש Tab שימש לכניסת פסקה. כדי לשנות את התנהגות ברירת המחדל ולהשתמש ב-Tab כדי להעביר את המיקוד, מפעילים את הגדרות > העדפות > מקורות > הפעלת מיקוד בהזזת כרטיסיות.

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

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

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

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

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

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