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

Jecelyn Yeen

שאילתות מאגר CSS שניתנות לעריכה בחלונית 'סגנונות'

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

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

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

התכונה 'שאילתות קונטיינר' היא ניסיונית כרגע. כדי לבדוק את זה, צריך להפעיל את הדגל #enable-container-queries מתחת ל-chrome://flags.

שאילתות מאגר CSS שניתנות לעריכה בחלונית 'סגנונות'

בעיה ב-Chromium: 1146422

תצוגה מקדימה של חבילת האינטרנט בחלונית 'רשת'

Web Bundle הוא פורמט קובץ ליצירת מכסה של משאב HTTP אחד או יותר בקובץ יחיד. עכשיו אפשר לראות תצוגה מקדימה של התוכן של חבילת האינטרנט בחלונית רשת.

תכונת Web Bundle היא ניסיונית כרגע. כדי לבדוק אותו, צריך להפעיל את הסימון #enable-experimental-web-platform-features בקטע chrome://flags.

תצוגה מקדימה של חבילת האינטרנט

בעיה ב-Chromium: 1182537

ניפוי באגים ב-Attribution Reporting API

שגיאות של Attribution Reporting API מדווחות עכשיו בכרטיסייה בעיות.

Attribution Reporting הוא ממשק API חדש שעוזר לכם למדוד מקרים שבהם פעולת משתמש (כמו קליק על מודעה או צפייה במודעה) מובילה להמרה, בלי להשתמש במזהים חוצי-אתרים.

שגיאות של Attribution Reporting API בכרטיסייה 'בעיות'

בעיה ב-Chromium: 1190735

טיפול טוב יותר במחרוזות במסוף

תפריט ההקשר החדש במסוף מאפשר להעתיק כל מחרוזת בתור תוכן, ליטרל JavaScript או ליטרל JSON.

תפריט הקשר חדש במסוף

בגרסה 90 של Chrome, כלי הפיתוח עדכנו את המסוף כך שתמיד תעצבו את פלטי המחרוזות כליטרלים חוקיים של JSON. קיבלנו מהמפתחים משוב על כך שהשינוי הזה עלול להיות מבלבל, חלק מהאנשים חושבים שכמות המילוט (escape) מופרזת והופכת את הפלט לבלתי קריא.

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

בעיה ב-Chromium: 1208389

ניפוי באגים משופר ב-CORS

שגיאות TypeError שקשורות ל-CORS במסוף מקושרות עכשיו לחלונית 'רשת' ולכרטיסייה 'בעיות'.

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

סמלים לצד הודעת השגיאה שקשורה ל-CORS

בעיה ב-Chromium: 1213393

Lighthouse גרסה 8.1

בחלונית Lighthouse פועלת עכשיו Lighthouse גרסה 8.1.

Lighthouse

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

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

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

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

בעיה ב-Chromium: 772558

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

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

נכון לעכשיו, ב-ChromeOS (CrOS), אפשר לבחור באפליקציות Chrome ובאפליקציות ל-Android שמצהירות עליהן יכולת של 'פתק חדש' כאפליקציה לרישום הערות בהגדרות הסטיילוס (מוצג אם נעשה שימוש במכשיר CrOS עם סטיילוס). אם האפליקציה נבחרת כאפליקציה לרישום הערות, אפשר להפעיל אותה דרך הלחצן 'יצירת הערה' בלוח הסטיילוס. הוספת השדה new-note-url למניפסט של האפליקציה היא חלק מהמאמץ להוסיף פונקציונליות מקבילה לאפליקציות אינטרנט.

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

בעיה ב-Chromium: 1185678

תיקון סלקטורים להתאמות CSS

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

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

  • חלק שלא נמצאה לו התאמה מוצג באפור בהיר.
  • חלק תואם של בורר מוצג בשחור.

סלקטורים תואמים ל-CSS

בעיה ב-Chromium: 1219153

הדפסה יפה של תגובות JSON בחלונית 'רשת'

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

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

הדפסה יפה של תגובות JSON בחלונית 'רשת'

באג ב-Chromium: 998674

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

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