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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

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

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

אופן הפעולה החדש של ההשלמה האוטומטית.

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

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

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

מקישים על Control+Shift+P או על Command+Shift+P (ב-Mac) כדי לפתוח את תפריט הפקודות, ואז מריצים את הפקודה Clear Site Data כדי לנקות את כל הנתונים שקשורים לדף, כולל: Service workers, ‏ localStorage, ‏ sessionStorage, ‏ IndexedDB, ‏ Web SQL, ‏ Cookies,‏ Cache ו-Application Cache.

הפקודה Clear Site Data (ניקוי הנתונים מאתרים).

איור 3. הפקודה Clear Site Data (ניקוי נתוני האתר).

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

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

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

איור 4. Application > Clear Storage.

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

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

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

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

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

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

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

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

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

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

מעבירים את העכבר מעל העמודה &#39;גודל&#39; כדי לראות את הגודל הלא דחוס של משאב.

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

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

נקודות עצירה (breakpoint) בתוך שורה בחלונית נקודות העצירה

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

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

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

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

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

ההתנהגות החדשה. יש 3 רשומות בחלונית Breakpoints (נקודות עצירה).

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

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

מספר המשאבים של IndexedDB ושל מטמון

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

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

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

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

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

בגרסה 73 של Chrome נוספו הסברים מפורטים כשנמצאים במצב בדיקה.

הסבר מפורט.

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

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

הסבר קצר מינימלי.

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

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

הגדרה למעבר בין כניסת פיסקה באמצעות מקש Tab בעורך בחלונית Sources

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

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

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

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

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

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

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

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