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

Jecelyn Yeen

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

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

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

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

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

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

בעיה ב-Chromium: 1270700

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

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

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

בעיה ב-Chromium: ‏ 1314299

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

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

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

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

בעיה ב-Chromium: ‏ 833147

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

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

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

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

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

עדכונים ב-Console

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

שגיאות במהלך הערכת סקריפט במסוף יוצרות עכשיו אירועי שגיאה מתאימים שמפעילים את הגורם המטפל 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 של אובייקט ב-Console ל-100 לכל היותר, כדי שהיא לא תפעל ללא הפסקה עבור אובייקטים מעגליים. (1272450)

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

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

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

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

בעיה ב-Chromium: ‏ 1268754

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

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

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

בעיה ב-Chromium: ‏ 1245191

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

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

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

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

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

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

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