דף זה תורגם על ידי Cloud Translation API.

מה חדש בכלי הפיתוח (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, קובץ מטמון, SQL}, קובץ מטמון, ו-}SQL,

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

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

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

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

הכרטיסייה 'Application' עם האפשרות 'ניקוי האחסון' מסומנת.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הסבר קצר.

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

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

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

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

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

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

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

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

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

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

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

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

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