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

Jecelyn Yeen

תכונה בגרסת טרום-השקה (Preview): החלונית החדשה 'תובנות לגבי הביצועים'

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

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

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

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

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

בעיה ב-Chromium: ‏ 1270700

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

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

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

בעיה ב-Chromium: ‏ 1314299

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

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

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

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

בעיה ב-Chromium: ‏ 833147

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

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

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

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

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

עדכונים ב-Console

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

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

בעיה ב-Chromium: ‏ 1295750

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

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

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

בעיה ב-Chromium: ‏ 1260744

ביטול ההקלטה של תהליך המשתמש בתחילת התהליך

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

בעיה ב-Chromium: ‏ 1257499

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

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

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

בעיה ב-Chromium: ‏ 1024156

מידע חשוב נוסף

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1268754

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

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

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

בעיה ב-Chromium: ‏ 1245191

הורדת ערוצי התצוגה המקדימה

מומלץ להשתמש ב-Chrome Canary,‏ Dev או Beta כדפדפן ברירת המחדל לפיתוח. ערוצי התצוגה המקדימה האלה מאפשרים לכם לגשת לתכונות העדכניות ביותר של DevTools, לבדוק ממשקי API מתקדמים של פלטפורמות אינטרנט ולמצוא בעיות באתר לפני שהמשתמשים שלכם ייתקלו בהן.

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• להשאיר תגובות בסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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