מה חדש בכלי הפיתוח (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, ‏ Cookies,‏ Cache ו-Application Cache.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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