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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1270700

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

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

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

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

בעיה ב-Chromium: 1314299

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

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

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

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

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

בעיה ב-Chromium: 833147

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1295750

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

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

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

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

בעיה ב-Chromium: 1260744

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

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

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

בעיה ב-Chromium: 1257499

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

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

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

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

בעיה ב-Chromium: 1024156

רגעי שיא שונים

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

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

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

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

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

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

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

בעיה ב-Chromium: 1268754

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

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

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

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

בעיה ב-Chromium: 1245191

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.