מה חדש בכלי הפיתוח (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. הפקודה ניקוי הנתונים מאתרים.

אפשר לנקות את נתוני האתר כבר זמן מה דרך 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);

כבר זמן מה שאפשר בכלי הפיתוח לציין מתי בדיוק צריך להשהות את הביצוע בנקודת עצירה, למשל: בתחילת השורה, לפני הקריאה ל-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 בעורך של חלונית המקורות

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

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

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

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

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

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

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

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