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

Kayce Basques

שלום! ריכזנו כאן את החידושים ב-כלי הפיתוח של 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, ‏ קובצי Cookie,‏ מטמון ומטמון האפליקציה.

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

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

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

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

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

איור 4. אפליקציה > פינוי נפח האחסון.

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

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

בעבר, בקטע Application‏ > IndexedDB אפשר היה לבדוק רק מסדי נתונים של IndexedDB מהמקור הראשי. לדוגמה, אם יש לכם <iframe> בדף, ו-<iframe> הזה משתמש ב-IndexedDB, לא תוכלו לראות את מסדי הנתונים שלו. החל מגרסה 75 של Chrome, כלי הפיתוח מציג מסדי נתונים של 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 נקודות עצירה. בעבר, החלונית Breakpoints לא אפשרה לנהל בנפרד את 3 נקודות העצירה (breakpoint). החל מגרסה 75 של Chrome, לכל נקודת עצירה מוטבעת יש ערך משלה בחלונית Breakpoints.

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

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

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

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

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

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

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

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

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

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

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

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

הסבר מפורט.

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

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

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

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

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

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

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

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

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

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

פנייה לצוות של כלי הפיתוח ל-Chrome

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

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

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