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

Sofia Emelianova
Sofia Emelianova
GitHub

חלונית חדשה למילוי אוטומטי

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

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

  1. בקטע מילוי אוטומטי של פרטי הפרופיל, לוחצים על אחד מהלחצנים מילוי הטופס, לוחצים על שליחה, ובחלון הדו-שיח שמירה של הכתובת? לוחצים על שמירה וחוזר לדף עם הטופס.
  2. פותחים את DevTools ומפעילים אירוע של מילוי אוטומטי: בוחרים שדה טופס ובוחרים את הכתובת מהרשימה הנפתחת.

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

החלונית 'מילוי אוטומטי'.

מידע נוסף זמין במאמרים מידע על טפסים ומילוי אוטומטי.

הגבלת רוחב פס משופרת לרשתות WebRTC

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

הפרמטרים החדשים הם: אובדן חבילות (באחוזים), אורך התור של החבילות (מספר החבילות) והדגל סידור מחדש של חבילות ב.

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

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

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

בעיה ב-Chromium: ‏ 41175925.

תמיכה באנימציות שמבוססות על גלילה בחלונית האנימציות

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

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

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

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

תמיכה משופרת בהטמעת עץ של CSS בקטע 'רכיבים' > 'סגנונות'

בכרטיסייה Elements (רכיבים) > Styles (סגנונות) נוספה תמיכה בהטמעת עץ של CSS, ועכשיו מוצגים סגנונות מוטמעים עם הכנסה פנימה ובסוגריים מסולסלים. הטמעת עץ ב-CSS היא דרך לקבץ יחד כללי CSS ולשפר את המבנה שלהם.

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

בעיה ב-Chromium: ‏ 40166888.

חלונית 'ביצועים משופרים'

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

הסתרת פונקציות וצאצאים שלהן בתרשים הלהבה

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

לפני ואחרי הוספת תפריט הקשר שמאפשר להסתיר פונקציות ואת הצאצאים שלהן.

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

חצים מהגורמים המעורבים שנבחרו לאירועים שהם יזמו

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

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

בנוסף, לכל הגורמים המעורבים יש עכשיו שדות Initiator for בכרטיסייה Summary, ושדות Initiator for ו-Initiated by כוללים קישורים עם שמות במקום Reveal.

בעיות ב-Chromium: ‏ 325604258, ‏ 325024819, ‏ 326055289.

Lighthouse 11.6.0

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

בין השינויים הבולטים: ההגדרה החדשה הפעלה של דגימת JS . ההגדרה הזו מושבתת כברירת מחדל.

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

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

מעקב ביצועים ללא דגימת JS (שמאל) וללא דגימת JS (ימין).

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

במאמר Lighthouse: אופטימיזציה של מהירות האתר מוסבר על היסודות של השימוש בחלונית Lighthouse ב-DevTools.

בעיה ב-Chromium: ‏ 772558.

טיפים לגבי קטגוריות מיוחדות בקטע 'זיכרון' > 'תמונות מצב של אשכול'

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

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

בעיה ב-Chromium: ‏ 41490331.

אפליקציה > עדכוני אחסון

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

בייטים שנעשה בהם שימוש באחסון השיתופי

בקטע Application‏ > Storage‏ > Shared storage מוצג עכשיו מספר הבייטים שבהם נעשה שימוש במקור.

לפני ואחרי, מוצג מספר הבייטים שבשימוש באחסון המשותף.

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

בעיה ב-Chromium: 324464353.

Web SQL הוצא משימוש באופן מלא

גרסת Chrome 119 הוציאה משימוש את Web SQL והוסרה ממנה אסימון הניסיון להוצאה משימוש, כך שלא ניתן יותר להשתמש ב-Web SQL.

בהמשך לכך, הסרנו מ-DevTools את הקטע Web SQL מהחלונית Application.

בעיה ב-Chromium: 327254049.

שיפורים בחלונית הכיסוי

בגרסה הזו נוספו כמה עדכונים לחלונית כיסוי:

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

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

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

לפני ואחרי שינוי הצבע של הקוד שנעשה בו שימוש לאפור.

בעיה ב-Chromium: 41494198, ‏ 329253687.

יכול להיות שהחלונית 'שכבות' תצא משימוש

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

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

לפני שהצוות יקבל את ההחלטה הסופית להוצאת הלוח משימוש, אתם מוזמנים לשתף את המחשבות והחששות שלכם.

הוצאה משימוש של הכלי לניתוח ביצועים (profiler) של JavaScript: שלב ארבע, סופי

בגרסה הזו, הלוח JS Profiler הוצא משימוש באופן מלא ואי אפשר להפעיל אותו מחדש.

כדי ליצור פרופיל של ביצועי המעבד (CPU), משתמשים בחלונית ביצועים.

בעיה ב-Chromium: 40262073.

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

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

  • Network:
    • תוקן באג שקשור לניתוח שגוי של קובצי cookie בכמה שורות (325410304).
    • תצוגה מקדימה של סטאק הקריאות תוקנה בעמודה Initiator (327665602).
  • מעקב אחר ביצועים: תיבות הסימון למעקב הן עכשיו זהות לאלה שבשאר ממשק המשתמש (1467464).
  • מקורות: נוספה הדגשת תחביר למסמכי XHTML (327940244).
  • הגדרות > מכשירים: Galaxy Fold הישן מוחלף ב-Galaxy Z Fold 5 החדש יותר (40113439).
  • ביצועים: כל תוצאות החיפוש שתואמות עכשיו מודגשות כשמבצעים חיפוש באמצעות Ctrl/Cmd+F (1523279).
  • מקורות מידע למפתחים: עכשיו מוצגים גם מקורות מידע שנטענו באמצעות תוספים לשפות, כמו תוסף Chrome לתמיכה ב-DevTools של C/C++‎ (DWARF) (40746829).
  • ביצועים: תוקנו סטאק הקריאות שנחתך והפריסה הלא טובה שלו בכרטיסייה סיכום (325314708).
  • תצוגת הארון: עכשיו אפשר להתמקד בלחצני סגירה, כך שאפשר לסגור את החלוניות באמצעות המקלדת.

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

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

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

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

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

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