מה חדש בכלי הפיתוח (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.

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

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

בודק זיכרון

בעיה ב-Chromium: 1166577

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

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

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

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

בעיה ב-Chromium: 1066772

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1162042

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

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

עכשיו אפשר ללחוץ לחיצה ימנית על נכס CSS בחלונית Styles ולבחור באפשרות הצגת הערך המחושב כדי להציג את הערך המחושב ל-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 החדשה בחלונית Cache Storage כדי להציג את כותרת תגובת ה-HTTP Vary.

שינוי הכותרת

בעיה ב-Chromium: 1186049

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

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

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

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

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

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

בעיה ב-Chromium: 11374

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

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

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

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

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

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

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 בוטל.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59