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

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

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

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

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

בעיה ב-Chromium: 1029427

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

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

כשחלה על רכיב 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

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

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

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

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

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

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

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

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

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

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

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

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

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

זהו הבסיס לשיפורים הבאים שלנו, לגבי הצגת תיאור מפורט יותר של בעיות CORS!

בעיה ב-Chromium: 1141824

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

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

הסטטוס 'בידוד בין מקורות' מוצג עכשיו בקטע אבטחה הקטע 'בידוד'.

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

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

בעיה ב-Chromium: 1139899

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

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

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

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

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

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

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

בעיה ב-Chromium: 1107766

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

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

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

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

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

העתקת ערך הנכס

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

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

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

בעיה ב-Chromium: 1132084

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

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

בעיה ב-Chromium: 1139615

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1127914

יחידות מידה עקביות לגדלים של קבצים/זיכרון

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

בעיה ב-Chromium: 1035309

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

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

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

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

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

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

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

בעיה ב-Chromium: 174309

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

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

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

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

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

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

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