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

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

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

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

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

בעיה ב-Chromium: 1029427

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

בכלי הפיתוח יש עכשיו תמיכה טובה יותר בניפוי באגים לפי זווית ב-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 (אפליקציה) > 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 ניתן למצוא מידע נוסף על אופטימיזציה של חוויית המשתמש עם מדדי חוויית המשתמש של אתרים.

נתיב של Web Vitals

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

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

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

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

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

שגיאות CORS

בעיה ב-Chromium: 1141824

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

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

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

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

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

מידע ממקורות שונים

בעיה ב-Chromium: 1139899

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

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

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

מידע של עובדי אינטרנט

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

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

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

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

פרטי מסגרת הפתיחה

בעיה ב-Chromium: 1107766

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

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

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

פתיחת החלונית &#39;רשת&#39; מ-Service Workers

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

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

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

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

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

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

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

בעיה ב-Chromium: 1132084

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

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

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

בעיה ב-Chromium: 1139615

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

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

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

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

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

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

חשבו את המשתנה Wasm במסוף

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

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

חשבו את המשתנה Wasm במסוף

בעיה ב-Chromium: 1127914

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

כלי הפיתוח משתמשים עכשיו ב-kB באופן עקבי להצגת גודל של קובץ/זיכרון. בעבר, DevTools משולב ב-kB (1,000 בייטים) ו-KiB (1,024 בייטים). לדוגמה, החלונית Network השתמשה בעבר בתוויות "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 של הדף.

ניפוי באגים ב-CSS Flex

כאן מופיע מסמך העיצוב של תכונות הכלים של Flexbox. תכונות נוספות יתווספו בקרוב.

רוצה לנסות? נשמח לשמוע מה דעתך.

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

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

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

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

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

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

בעיה ב-Chromium: 174309

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

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

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

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

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

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

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

Chrome 123

גרסה 122 של Chrome

גרסה 121 של Chrome

Chrome 120

גרסה 119 של Chrome

גרסה 118 של Chrome

גרסה 117 של Chrome

גרסה 116 של Chrome

Chrome 115

Chrome 114

גרסה 113 של Chrome

גרסה 112 של Chrome

גרסה 111 של Chrome

Chrome 110

Chrome 109

גרסה 108 של Chrome

גרסה 107 של Chrome

Chrome 106

Chrome 105

Chrome 104

גרסה 103 של Chrome

גרסה 102 של Chrome

גרסה 101 של Chrome

Chrome 100

גרסה 99 של Chrome

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

גרסה 92 של Chrome

גרסה 91 של Chrome

Chrome 90

גרסה 89 של Chrome

גרסה 88 של Chrome

גרסה 87 של Chrome

גרסה 86 של Chrome

גרסה Chrome 85

גרסה 84 של Chrome

גרסה 83 של Chrome

גרסה 82 של Chrome

Chrome 82 בוטל.

גרסה 81 של Chrome

גרסה 80 של Chrome

גרסה 79 של Chrome

גרסה 78 של Chrome

גרסה 77 של Chrome

גרסה 76 של Chrome

גרסה 75 של Chrome

גרסה 74 של Chrome

גרסה 73 של Chrome

גרסה 72 של Chrome

גרסה 71 של Chrome

גרסה 70 של Chrome

גרסה Chrome 68

Chrome גרסה 67

Chrome 66

גרסה Chrome 65

Chrome 64

Chrome 63

גרסה 62 של Chrome

גרסה 61 של Chrome

Chrome 60

Chrome 59