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

Jecelyn Yeen

הפעלה מהירה יותר של כלי הפיתוח

ההפעלה של כלי הפיתוח מהירה עכשיו בכ-37% מבחינת קומפילציה של JavaScript (מ-6.9 שניות ל-5 שניות)! 🎉

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

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

בעיה ב-Chromium: ‏ 1029427

כלים חדשים להמחשה של זוויות CSS

כלי הפיתוח כוללים עכשיו תמיכה משופרת בניפוי באגים של זוויות CSS.

כשמחילים זווית CSS על רכיב HTML בדף (לדוגמה, background: linear-gradient(angle, color-stop1, color-stop2), transform: rotate(angle)), סמל של שעון מוצג לצד הזווית בחלונית Styles (סגנונות). לוחצים על סמל השעון כדי להפעיל או להשבית את שכבת העל של השעון. אפשר ללחוץ על כל מקום בשעון או לגרור את המחוג כדי לשנות את הזווית.

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

בעיות ב-Chromium: ‏ 1126178, 1138633

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

ב-DevTools נוספו שתי הדמיות חדשות בכרטיסייה Rendering (עיבוד), שמאפשרות להשבית את פורמטי התמונות AVIF ו-WebP. האמולציות החדשות האלה מקלות על מפתחים לבדוק תרחישים שונים של טעינת תמונות בלי לעבור בין דפדפנים.

נניח שיש לנו את קוד ה-HTML הבא להצגת תמונה בפורמטים AVIF ו-WebP בדפדפנים חדשים יותר, עם תמונת PNG חלופית לדפדפנים ישנים יותר.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

פותחים את הכרטיסייה Rendering, בוחרים באפשרות 'Disable AVIF image format' (השבתת פורמט התמונה AVIF) ומרעננים את הדף. מעבירים את העכבר מעל הסמל img src. התמונה הנוכחית src (currentSrc) היא עכשיו תמונת ה-WebP החלופית.

בעיה ב-Chromium: ‏ 1130556

הדמיה של גודל מכסת האחסון בחלונית 'אחסון'

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

עוברים אל Application (אפליקציה) > Storage (אחסון), מסמנים את התיבה Simulate custom storage quota (הדמיה של מכסת אחסון מותאמת אישית) ומזינים מספר תקין כלשהו כדי להדמות את מכסת האחסון.

בעיות ב-Chromium: 945786, ‏ 1146985

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

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

אחרי שתתעדו את ביצועי הטעינה, תסמנו את תיבת הסימון Web Vitals בחלונית Performance כדי לראות את הנתיב החדש Web Vitals.

בכרטיסייה מוצג כרגע מידע על מדדי Core Web Vitals, כמו הצגת תוכן ראשוני (FCP),‏ המהירות שבה נטען רכיב התוכן הכי גדול (LCP) ושינוי פריסה (LS).

בכתובת web.dev/vitals אפשר לקרוא מידע נוסף על אופטימיזציה של חוויית המשתמש באמצעות מדדי Web Vitals.

בעיה ב-Chromium: לא רלוונטי

דיווח על שגיאות CORS בחלונית הרשת

בכלי הפיתוח מוצגת עכשיו שגיאת CORS כשבקשה לרשת נכשלת בגלל שיתוף משאבים בין מקורות (CORS).

בחלונית Network, בודקים את בקשת הרשת של CORS שנכשלה. בעמודה 'סטטוס' מוצג CORS error. מעבירים את העכבר מעל השגיאה, ועכשיו מופיע קוד השגיאה בתיאור הכלים. בעבר, בכלי הפיתוח הוצג רק הסטטוס הכללי (נכשל) לשגיאות CORS.

זהו הבסיס לשיפורים הבאים שלנו, שבהם נספק תיאור מפורט יותר של בעיות CORS.

בעיה ב-Chromium: ‏ 1141824

עדכונים בתצוגת פרטי הפריים

מידע על חסימה לגישה מדומיינים אחרים בתצוגת הפרטים של Frame

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

בקטע החדש זמינות API מוצגת הזמינות של SharedArrayBuffer (SAB) והאם אפשר לשתף אותם באמצעות postMessage().

אזהרת הוצאה משימוש תוצג אם ה-SAB וה-postMessage() זמינים כרגע, אבל ההקשר לא מבודד בין מקורות. במאמר הזה מוסבר למה תידרש חסימה לגישה מדומיינים אחרים לתכונות כמו SharedArrayBuffers.

בעיה ב-Chromium: ‏ 1139899

מידע חדש על Web Workers בתצוגת פרטי המסגרת

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

בחלונית Application (אפליקציה), מרחיבים את המסגרת עם עובדי האינטרנט ובוחרים עובד בעץ Workers (עובדים) כדי לראות את הפרטים של עובד האינטרנט.

בעיות ב-Chromium: 1122507, ‏ 1051466

הצגת פרטי מסגרת של חלונות שנפתחו

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

בוחרים חלון פתוח בעץ Frames כדי לראות את פרטי החלון. לוחצים על הקישור Opener Frame כדי להציג את חלון הפתיחה בחלונית Elements.

בעיה ב-Chromium: ‏ 1107766

פתיחה של חלונית הרשת מתוך החלונית Service Workers

אפשר לראות את כל המידע על ניתוב בקשות של Service Worker (SW) באמצעות הקישור החדש בקשות רשת. כך המפתחים מקבלים הקשר נוסף כשמנפים באגים ב-SW.

עוברים אל Application > Service Workers ולוחצים על Network requests של SW. החלונית רשת נפתחת בחלונית התחתונה ומציגה את כל הבקשות שקשורות ל-Service Worker (בקשות הרשת מסוננות לפי "is:service-worker-intercepted").

בעיה ב-Chromium: לא רלוונטי

אפשרויות חדשות להעתקה בחלונית הרשת

העתקת ערך מאפיין

האפשרות החדשה "העתקת ערך" בתפריט ההקשר מאפשרת להעתיק את ערך המאפיין של בקשת רשת.

בחלונית רשת, לוחצים על בקשת רשת כדי לפתוח את החלונית כותרות. לוחצים לחיצה ימנית על אחת מהמאפיינים בקטע Request payload (JSON) (מטען ייעודי (payload) של הבקשה (JSON)), Form Data (נתוני טופס), Query String Parameters (פרמטרים של מחרוזת שאילתה), Request Headers (כותרות של בקשה) או Response Headers (כותרות של תגובה).

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

בעיה ב-Chromium: 1132084

העתקה של דוח קריסות של מאתחל הרשת

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

בעיה ב-Chromium: ‏ 1139615

עדכונים בניפוי באגים ב-Wasm

תצוגה מקדימה של ערך משתנה Wasm כשמעבירים את העכבר מעליו

כשמעבירים את העכבר מעל משתנה בפירוק של WebAssembly ‏ (Wasm) בזמן שההפעלה מושהית בנקודת עצירה, DevTools מציג עכשיו את הערך הנוכחי של המשתנה.

בחלונית מקורות, פותחים קובץ Wasm, מציבים נקודת עצירה ומרעננים את הדף. מעבירים את העכבר מעל משתנה כדי לראות את הערך.

בעיות ב-Chromium: 1058836, 1071432

הערכת משתנה Wasm במסוף

עכשיו אפשר להעריך משתנה Wasm במסוף בזמן שההפעלה מושהית בנקודת עצירה.

בדוגמה הזו, אנחנו מציבים נקודת עצירה בשורה local.get $input. במהלך ניפוי הבאגים, הקלדה של $input במסוף תחזיר את הערך הנוכחי של המשתנה, שהוא 4 במקרה הזה.

בעיה ב-Chromium: ‏ 1127914

יחידות מידה עקביות לגודל קובץ או זיכרון

בכלי הפיתוח, גודל הקובץ או הזיכרון מוצג עכשיו באופן עקבי ב-kB. בעבר, כלי הפיתוח השתמשו גם ב-kB (1,000 בייט) וגם ב-KiB (1,024 בייט). לדוגמה, בחלונית Network נעשה בעבר שימוש בתוויות 'kB', אבל בפועל בוצעו חישובים באמצעות KiB, מה שגרם לבלבול מיותר.

בעיה ב-Chromium: ‏ 1035309

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

הגדלנו את הניגודיות של הצבעים של רכיבים פסאודו ב-DevTools כדי שיהיה לכם קל יותר לזהות אותם.

בעיה ב-Chromium: ‏ 1143833

תכונות ניסיוניות

כלים לניפוי באגים ב-CSS Flexbox

בקרוב נוסיף כלים לניפוי באגים ב-Flexbox.

כדי להתחיל, כלי הפיתוח מציג עכשיו תג flex בחלונית הרכיבים עבור רכיבים עם display: flex שמוחל עליהם.

בנוסף, נוספו סמלי יישור חדשים למאפייני ה-flexbox הבאים:

• flex-direction
• align-items
• align-content
• align-self
• justify-items
• justify-content

בנוסף, הסמלים האלה מודעים להקשר. כיוון הסמל ישתנה בהתאם ל:

• flex-direction
• direction
• writing-mode

הסמלים האלה נועדו לעזור לכם להמחיש טוב יותר את פריסת ה-flexbox של הדף.

מסמך התכנון של התכונות של כלי Flexbox. בקרוב נוסיף עוד תכונות.

כדאי לנסות ולספר לנו מה דעתך.

בעיות ב-Chromium: ‏ 1144090, ‏ 1139945

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

מאז הגרסה האחרונה, נוספה ל-DevTools תמיכה ניסיונית בהתאמה אישית של מקשי קיצור.

מעכשיו אפשר ליצור אקורדים (כלומר, קיצורי דרך שכוללים כמה הקשות על מקשים) בכלי לעריכת קיצורי דרך.

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

בעיה ב-Chromium: 174309

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

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

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

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

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

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

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