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

Jecelyn Yeen

חלון קופץ עם מידע על Web Vitals בחלונית הביצועים

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

חלון קופץ עם מידע על Web Vitals

בעיה ב-Chromium: 1147872

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

עכשיו אפשר להחליף את המצב של התג scroll-snap בחלונית רכיבים כדי לבדוק את היישור במצב גלילה-הצמדה ב-CSS.

תמונת מצב לגלילה בשירות CSS

כאשר רכיב HTML בדף (למשל, דף ההדגמה הזה) מוחל עליו scroll-snap-type, תוכלו לראות תג scroll-snap לידו בחלונית רכיבים. אפשר ללחוץ על התג כדי להציג שכבת-על של גלילה בדף.

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

בעיה ב-Chromium: 862450

הכלי החדש לבדיקת זיכרון

צריך להשתמש בכלי לבדיקת זיכרון החדש כדי לבדוק ArrayBuffer ב-JavaScript, וגם בזיכרון Wasm.

פותחים את דף ההדגמה הזה. בחלונית מקורות, פותחים את הקובץ demo-js.js ומגדירים נקודת עצירה בשורה 18.

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

כדאי לעיין במסמכי התיעוד כדי לקבל מידע נוסף על בדיקת JavaScript ArrayBuffer ו-WebAssembly.Memory באמצעות בודק הזיכרון החדש.

בדיקת זיכרון

בעיה ב-Chromium: 1166577

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

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

חלונית הגדרות התג בחלונית הרכיבים

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

בעיה ב-Chromium: 1066772

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

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

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

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

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

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

בעיות ב-Chromium: 1149832, 1170656

לחצן לתנאי רשת חדשים עם אפשרויות להגדרת Content-Encoding

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

אפשרות חדשה של קידודי תוכן קבילים נוספה לכרטיסייה תנאי רשת. צריך להגדיר אותו כדי לבדוק אם תגובות השרת מקודדות בצורה נכונה בדפדפנים שלא תומכים ב-gzip, ב-brotli או בקודים אחרים של Content-Encoding בעתיד.

לחצן לתנאי רשת חדשים, עם אפשרויות להגדרת קידוד תוכן

בעיה ב-Chromium: 1162042

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

קיצור דרך חדש להצגת ערך שמחושב בחלונית 'סגנונות'

עכשיו תוכלו ללחוץ לחיצה ימנית על מאפיין CSS בחלונית סגנונות ולבחור באפשרות הצגת ערך מחושב כדי להציג את ערך ה-CSS המחושב.

קיצור דרך חדש להצגת הערך המחושב

בעיה ב-Chromium: 1076198

תמיכה במילת המפתח accent-color

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

נכס ה-CSS accent-color הוא ניסיוני כרגע. צריך להפעיל את chrome://flags/#enable-experimental-web-platform-features כדי לבדוק אותו.

צבע משני

בעיה ב-Chromium: 1092093

סיווג של סוגי הבעיות באמצעות צבעים וסמלים

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

  • שגיאות בדף (אדום). בעיות שיש להן השפעה מיידית על פונקציונליות הדף, כמו הגדרה לא נכונה של כותרות CORS וכו'.
  • שינויי תוכנה שעלולים לגרום לכשלים (תווית צהובה). בעיות שמיידעות על שינוי קרוב ולא תואם בפלטפורמת האינטרנט, שעלול לגרום לאובדן פונקציונליות של הדף (למשל, אזהרה על שינויים קרובים ב-CORS RFC 1918).
  • שיפורים אפשריים (כחול). שיפורים אפשריים בדף, אבל הם לא פוגעים כרגע בפונקציונליות הבסיסית של הדף (למשל בעיות נגישות)

סיווג של סוגי הבעיות באמצעות צבעים וסמלים

בעיה ב-Chromium: 1183241

מחיקת אסימוני מהימנות

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

Trust Token הוא ממשק API חדש שעוזר להילחם בהונאות ולהבחין בין בוטים לבני אדם אמיתיים, ללא מעקב פסיבי. כך מתחילים לעבוד עם אסימונים לאימות אמון.

מחיקת אסימוני מהימנות

בעיה ב-Chromium: 1126824

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

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

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

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

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

בעיה ב-Chromium: 1158827

סינון ניסויים בהגדרה 'ניסויים'

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

סינון ניסויים בהגדרה 'ניסויים'

עמודת Vary Header חדשה בחלונית 'אחסון המטמון'

משתמשים בעמודה החדשה Vary Header בחלונית מטמון אחסון כדי להציג את כותרת תגובת ה-HTTP Vary.

שינוי עמודת הכותרת

בעיה ב-Chromium: 1186049

שיפורים בחלונית המקורות

תמיכה בתכונות JavaScript חדשות

כלי הפיתוח תומכים עכשיו בתכונה החדשה של שפת JavaScript לבדיקת מותג פרטי, שנקראת #foo in obj.

התכונה הזו של בדיקות המותג הפרטי מרחיבה את האופרטור כך שיתמוך בבדיקה של שדות של מחלקה פרטית בכל אובייקט נתון.

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

בדיקות מותג פרטי ב-JavaScript

בעיה ב-Chromium: 11374

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

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

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

בעיות ב-Chromium: 1142705, 979000, 1180794

תמיכה בתצוגה מקדימה בעת העברת העכבר עם הסימון []

כלי הפיתוח תומכים עכשיו בתצוגה מקדימה של העברת עכבר מעל ביטויים של חברים ב-JavaScript, שנעשה בהם שימוש בסימון [] בחלונית מקורות.

תמיכה בתצוגה מקדימה בעת העברת העכבר עם הסימון '[]'

בעיה ב-Chromium: 1178305

מתאר משופר של קובצי HTML

עכשיו יש בכלי הפיתוח תמיכה טובה יותר בקווי מתאר לקובצי HTML. בחלונית מקורות, פותחים קובץ HTML. אפשר להחליף את מצב מתאר הקוד באמצעות המקלדת Cmd + Shift + O ב-Mac או באמצעות Ctrl + Shift + O ב-Windows.

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

מתאר משופר של קובצי HTML

בעיה ב-Chromium: 761019, 1191465

דוחות קריסות תקינים לניפוי באגים ב-Wasm

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

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

דוחות קריסות תקינים לניפוי באגים ב-Wasm

הגרסה הישנה של Chrome שבצד ימין לא מציגה את מיקום המקור (למשל dsquare) בדוחות הקריסות, ואילו הגרסה החדשה שבצד שמאל כן מציגה.

בעיה ב-Chromium: 1189161

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

כדאי להשתמש ב-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