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

Kayce Basques

שלום! מה חדש בכלי הפיתוח ל-Chrome ב-Chrome 75.

גרסת וידאו של הדף הזה

ערכים מוגדרים מראש משמעותיים להשלמה אוטומטית של פונקציות CSS

חלק ממאפייני ה-CSS, כמו filter, מאפשרים להזין ערכים כפונקציות. לדוגמה, filter: blur(1px). מוסיף טשטוש של פיקסל אחד לצומת. כשמבצעים השלמה אוטומטית של נכסים כמו filter, כלי הפיתוח מאכלסים לנכס עם ערך משמעותי כדי שתוכלו לראות בתצוגה מקדימה איזה סוג של שינוי יחול בערך בצומת.

ההתנהגות הישנה של ההשלמה האוטומטית.

איור 1. ההתנהגות הישנה של ההשלמה האוטומטית. כלי הפיתוח השלמת אוטומטית לfilter: blur ולא ניתן לראות את השינוי באזור התצוגה.

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

איור 2. ההתנהגות החדשה של ההשלמה האוטומטית. כלי הפיתוח השלמת אוטומטית לfilter: blur(1px) ול השינוי יופיע באזור התצוגה.

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

ניקוי נתוני האתר מתפריט הפקודה

מקישים על Control+Shift+P או Command+Shift+P (Mac) כדי לפתוח את תפריט הפקודות ולאחר מכן להריץ את הפקודה הפקודה ניקוי נתוני אתר כדי לנקות את כל הנתונים שקשורים לדף, כולל: Service Worker, localStorage, sessionStorage, IndexedDB, Web SQL, קובצי Cookie, מטמון, וגם מטמון האפליקציה.

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

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

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

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

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

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

בעיה רלוונטית ב-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);

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

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

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

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

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

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

ספירת המשאבים של IndexedDB ו-cache

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

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

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

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

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

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

הסבר קצר מפורט.

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

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

הסבר קצר קצר.

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

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

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

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

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

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

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

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

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

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

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

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