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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1270700

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

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

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

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

בעיה ב-Chromium: 1314299

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

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

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

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

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

בעיה ב-Chromium: 833147

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

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

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

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

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

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

עדכונים במסוף

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

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

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

בעיה ב-Chromium: 1295750

שמירת ביטוי בזמן אמת באמצעות Enter

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

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

שמירת ביטוי בזמן אמת באמצעות Enter

בעיה ב-Chromium: 1260744

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

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

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

בעיה ב-Chromium: 1257499

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

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

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

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

בעיה ב-Chromium: 1024156

דגשים שונים

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

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

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

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

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

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

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

בעיה ב-Chromium: 1268754

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

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

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

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

בעיה ב-Chromium: 1245191

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

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