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

Jecelyn Yeen

הפעלה חוזרת של הקלטה במכשיר ההקלטה

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

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

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

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

בעיה ב-Chromium: ‏ 1257499

תמיכה באירוע של העברת העכבר מעל בחלונית 'מכשיר הקלטה'

עכשיו אפשר להוסיף שלב של העברת העכבר מעל רכיב מסוים (hover) באופן ידני בהקלטה במכשיר ההקלטה.

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

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

בעיה ב-Chromium: ‏ 1257499

המדד LCP (המהירות שבה נטען רכיב התוכן הכי גדול) בחלונית 'תובנות לגבי הביצועים'

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

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

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

בעיה ב-Chromium: ‏ 1326481

זיהוי הבהובים של טקסט (FOIT, ‏ FOUT) כסיבות אפשריות לשינויים בפריסה

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

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

במאמר אופטימיזציה של הטעינה והעיבוד של גופני אינטרנט מוסבר איך למנוע שינויי פריסה.

בעיות ב-Chromium: 1334628, ‏ 1328873

רכיבי handler של פרוטוקולים בחלונית Manifest

עכשיו אפשר להשתמש בכלי הפיתוח כדי לבדוק את הרישום של handlers של פרוטוקול כתובת URL עבור אפליקציות מסוג Progressive Web App ‏ (PWA).

רישום handlers של פרוטוקול כתובת URL מאפשר ל-PWA מותקנים לטפל בקישורים שמשתמשים בפרוטוקול ספציפי (למשל magnet, ‏ web+example) כדי לספק חוויה משולבת יותר.

עוברים לקטע Protocol Handlers דרך החלונית Application > Manifest. כאן אפשר לראות ולבדוק את כל הפרוטוקולים הזמינים.

לדוגמה, אפשר להתקין את הדמו הזה של PWA. בקטע Protocol Handlers (מטפלים בפרוטוקולים), מקלידים americano ולוחצים על Test protocol (בדיקת פרוטוקול) כדי לפתוח את דף הקפה ב-PWA.

בעיות ב-Chromium: ‏ 1300613

תג השכבה העליונה בחלונית הרכיבים

כדי להבין את הרעיון של השכבה העליונה ולראות איך התוכן בשכבה העליונה משתנה, אפשר להשתמש בתג השכבה העליונה.

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

בהדגמה הזו, לוחצים על פתיחת תיבת דו-שיח.

כדי לעזור לכם לראות את הרכיבים בשכבה העליונה, כלי הפיתוח מוסיפים מאגר שכבה עליונה (#top-layer) לעץ ה-DOM. הוא ממוקם אחרי תג הסגירה </html>.

כדי לעבור מהרכיב של קונטיינר השכבה העליונה לרכיב העץ של השכבה העליונה, לוחצים על הלחצן reveal לצד הרכיב או הרקע שלו בקונטיינר של השכבה העליונה.

לצד רכיב העץ של השכבה העליונה (לדוגמה, רכיב תיבת הדו-שיח), לוחצים על התג top-layer כדי לעבור למאגר של השכבה העליונה.

בעיה ב-Chromium: ‏ 1313690

צירוף מידע על ניפוי באגים ב-Wasm בזמן הריצה

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

פותחים קובץ Wasm בחלונית מקורות. לוחצים לחיצה ימנית בעורך ובוחרים באפשרות הוספת מידע לניפוי באגים בפורמט DWARF… כדי לצרף מידע לניפוי באגים לפי דרישה.

בעיה ב-Chromium: ‏ 1341255

תמיכה בעריכה בזמן אמת במהלך ניפוי באגים

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

ב-Chrome 104, כלי הפיתוח מחזירים את התכונה restart frame (הפעלה מחדש של פריים). עם זאת, לא הייתה לך אפשרות לערוך את הפונקציה שבה ההפעלה שלך מושהית כרגע. מפתחים נוהגים לעצור פונקציה ואז לערוך אותה בזמן שהיא מושהית.

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

• אפשר לערוך רק את הפונקציה העליונה ביותר כשההפעלה מושהית
• אין קריאה רקורסיבית לאותה פונקציה בהמשך המחסנית

בעיה ב-Chromium: ‏ 1334484

הצגה ועריכה של @scope בכללים בחלונית Styles (סגנונות)

עכשיו אפשר לראות ולערוך את כללי ה-at של CSS @scope בחלונית Styles.

הכללים @scope at הם חלק ממפרט CSS Cascading and Inheritance Level 6. הכללים האלה מאפשרים למפתחים להגדיר את היקף כללי הסגנון ב-CSS.

פותחים את דף ההדגמה הזה ובודקים את ההיפר-קישור ברכיב <div class=”dark-theme”>. בחלונית Styles, רואים את כללי ה-at ‏@scope. לוחצים על הצהרת הכלל כדי לערוך אותה.

בעיה ב-Chromium: ‏ 1337777

שיפורים במפת המקור

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

• כלי הפיתוח פותרים עכשיו בצורה תקינה מזהים של מפת מקור עם סימני פיסוק. חלק מהכלים המודרניים לצמצום קבצים (לדוגמה, esbuild) יוצרים מפות מקור שממזגות מזהים עם סימני פיסוק עוקבים (פסיק, סוגריים, נקודה ופסיק).
• כלי הפיתוח פותרים עכשיו שמות של מיפויי מקור עבור בנאים עם קריאה ל-super.
• תוקן באגים בהוספה לאינדקס של כתובות URL של מפות מקור משוכפלות. בעבר, נקודות עצירה לא הופעלו בקבצים מסוימים בגלל כתובות URL קנוניות משוכפלות.

בעיה ב-Chromium: 1335338, ‏ 1333411

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

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

• כשמוחקים זוג של מפתח וערך באחסון מקומי, הוא מוסר מהטבלה בחלונית Application > Local Storage. (1339280)
• תצוגות מקדימות של צבעים מוצגות עכשיו בצורה נכונה כשמציגים קובצי CSS בחלונית מקורות. בעבר, המיקומים שלהם לא היו נכונים. (1340062)
• הצגה עקבית של פריטים ב-CSS flex ו-grid בחלונית Layout, וגם הצגה שלהם כתוויות בחלונית Elements. בעבר, פריטי ה-flex וה-grid נעלמו באופן אקראי בשני המקומות. (1340441, 1273992)
• אם כלי הפיתוח מצא את הסקריפט שגרם לכך שהמסגרת סומנה כמודעה, קישור חדש לסקריפט של מודעה של יוצר זמין עבור מסגרות של מודעות. אפשר לפתוח מסגרת דרך Application > Frames. (1217041)

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

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

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

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

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

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

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