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

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

אחרי שמקליטים את ביצועי הטעינה, מסמנים את תיבת הסימון 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.

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

בעיה ב-Chromium: ‏ 1141824

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

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

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

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

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

בעיה ב-Chromium: ‏ 1139899

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1107766

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

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

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

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

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

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

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

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

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

בעיה ב-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 בחלונית Elements לרכיבים עם 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.
• אפשר להוסיף תגובות לסרטונים מה חדש בכלי הפיתוח של YouTube או טיפים לשימוש בכלי הפיתוח של YouTube.

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

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