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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 41175925.

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

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

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

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

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

שיפור התמיכה בקינון CSS ב-Elements > Styles

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

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

בעיה ב-Chromium: 40166888.

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

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

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

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

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

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

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

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

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

בנוסף, לכל היוזמים יש עכשיו שדות של 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.

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

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

בעיה ב-Chromium: 772558.

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

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

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

בעיה ב-Chromium: ‏ 41490331.

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

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

בייטים בשימוש באחסון משותף

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

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

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

בעיה ב-Chromium: ‏ 324464353.

הוצאה מלאה משימוש של Web SQL

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

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

בעיה ב-Chromium: ‏ 327254049.

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

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

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

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

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

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

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

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

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

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

נשמח לשמוע את דעתך לפני שהצוות יקבל את ההחלטה הסופית להוציא את החלונית משימוש.

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

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

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

בעיה ב-Chromium: ‏ 40262073.

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

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

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

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

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

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

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

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

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