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

Jecelyn Yeen

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

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

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

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

בעיה ב-Chromium: 1029427

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

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

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

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

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

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

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

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

הנתיב מציג כרגע נתונים של מדדי Web Vitals, כמו הצגת התוכן הראשון (FCP), המהירות שבה נטען רכיב התוכן הכי גדול (LCP) ו-Layout Shift (LS).

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

בעיה ב-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

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

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

כדי לצפות בפרטי החלון, בוחרים חלון פתוח מתחת לעץ מסגרות. לוחצים על הקישור 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

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

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

בעיה ב-Chromium: 1139615

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

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

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

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

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

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

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

בדוגמה הזו, אנחנו מציבים נקודת עצירה בשורה 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 אפשרויות נוספות > עזרה > דיווח על בעיה בכלי הפיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להשאיר תגובות בסרטונים של מה חדש בכלי הפיתוח ב-YouTube או בסרטונים של טיפים לכלי הפיתוח ב-YouTube.

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

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