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

תכונת תצוגה מקדימה: חלונית חדשה עם תובנות לגבי הביצועים

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

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

חלונית חדשה של תובנות ביצועים

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

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

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

בעיה ב-Chromium: 1270700

קיצורי דרך חדשים לאמולציה של עיצובים בהירים כהים

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

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

קיצורי דרך חדשים לאמולציה של עיצובים בהירים כהים

בעיה ב-Chromium: 1314299

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

כלי הפיתוח מחילים עכשיו את Content Security Policy (CSP) בכרטיסייה Preview (תצוגה מקדימה) בחלונית Network (רשת).

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

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

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

בעיה ב-Chromium: 833147

טעינה משופרת מחדש בנקודת עצירה (breakpoint)

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

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

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

טעינה משופרת מחדש בנקודת עצירה (breakpoint)

בעיות ב-Chromium: 1014415, 1004038, 1112863, 1134899

עדכוני מסוף

טיפול בשגיאות בהפעלת סקריפטים במסוף

שגיאות במהלך הערכת הסקריפט במסוף יוצרות עכשיו אירועי שגיאה מתאימים שמפעילים את ה-handler של window.onerror ונשלחים כאירועי "error" באובייקט החלון.

טיפול בשגיאות בהפעלת סקריפטים במסוף

בעיה ב-Chromium: 1295750

שמירת ביטוי פעיל באמצעות Enter

אחרי שמסיימים להקליד ביטוי פעיל, אפשר ללחוץ על Enter כדי לשמור אותו. בעבר, הקשה על Enter הובילה להוספת שורות חדשות. השיטה הזו לא תואמת לחלקים אחרים של כלי הפיתוח.

כדי להוסיף שורה חדשה בעורך הביטוי בזמן אמת, צריך להשתמש במקום זאת ב- Shift + Enter.

שמירת ביטוי פעיל באמצעות Enter

בעיה ב-Chromium: 1260744

ביטול תיעוד הזרימה של המשתמש בהתחלה

אפשר לבטל את ההקלטה בתחילת התהליך של הקלטת הזרימה של המשתמש. בעבר לא הייתה אפשרות לבטל את ההקלטה.

ביטול תיעוד הזרימה של המשתמש בהתחלה

בעיה ב-Chromium: 1257499

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

ניתן לראות את רכיבי ההדגשה שעברו בירושה (למשל ::selection, ::spelling-error, ::grammar-error ו-::highlight) בחלונית סגנונות. בעבר הכללים האלה לא הוצגו.

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

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

בעיה ב-Chromium: 1024156

פרטים שונים

הנה כמה תיקונים חשובים בגרסה הזו:

  • בחלונית Properties (מאפיינים) מוצגים עכשיו מאפייני accessor עם ערך כברירת מחדל. הוא הוסתר בטעות. (1309087)
  • בחלונית סגנונות מוצגים עכשיו כללי @support שבוטלו בצורה תקינה כקו חוצה. בעבר, הכללים לא היו עם קו חוצה. (1298025)
  • תוקנה הלוגיקה של עיצוב CSS בחלונית מקורות שגרמה להצגת מספר שורות ריקות בזמן עריכת ה-CSS. (1309588)
  • מגבילים את האפשרות Expand רקורסיבי של אובייקט במסוף ל-100 לכל היותר, כדי שהוא לא יפעל לנצח באובייקטים מעגליים. (1272450)

[ניסיוני] העתקת שינויי CSS

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

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

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

העתקת שינויי ה-CSS

בעיה ב-Chromium: 1268754

[ניסיוני] בחירת צבע מחוץ לדפדפן

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

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

בחירת צבע מחוץ לדפדפן

בעיה ב-Chromium: 1245191

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

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