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

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

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

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

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

בעיה ב-Chromium: 1029427

כלים חדשים להצגה חזותית של זוויות ב-CSS

מעכשיו יש תמיכה טובה יותר בניפוי באגים של קוד CSS ב-DevTools.

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

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

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

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

נוספו שתי הדמיות חדשות לכרטיסייה 'עיבוד' בכלי הפיתוח, שמאפשרות להשבית את פורמט התמונות 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>

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

בעיה ב-Chromium: 1130556

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

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

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

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

נתיב חדש של מדדי Web Vitals בהקלטות של חלונית הביצועים

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1141824

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

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

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

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

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

בעיה ב-Chromium: 1139899

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

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

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

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

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

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

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

בעיה ב-Chromium: 1107766

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1132084

העתקה של סטאק-טראק למפעיל הרשת

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

בעיה ב-Chromium: 1139615

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

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

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

בחלונית מקורות, פותחים קובץ 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

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

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

בעיה ב-Chromium: 1143833

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

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

בקרוב – כלים לניפוי באגים ב-Flexbox

קודם כול, עכשיו מוצגת תגית flex בחלונית הרכיבים של DevTools לרכיבים שהוחל עליהם 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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.