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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.