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

Jecelyn Yeen

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

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

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

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

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

בעיה ב-Chromium: ‏ 1257499

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

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

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

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

בעיה ב-Chromium: ‏ 1257499

המדד Largest Contentful Paint ‏ (LCP) בחלונית 'תובנות לגבי הביצועים'

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

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

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

בעיה ב-Chromium: ‏ 1326481

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

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

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

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

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

רכיבי handler של פרוטוקולים בחלונית המניפסט

עכשיו אפשר להשתמש בכלי הפיתוח כדי לבדוק את הרישום של 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, מעיינים ב-@scope at-rules. לוחצים על הצהרת הכלל כדי לערוך אותה.

בעיה ב-Chromium: ‏ 1337777

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

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

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

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

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

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

• כשמוחקים זוג של מפתח וערך באחסון מקומי, הוא מוסר מהטבלה בחלונית Application > Local Storage. (1339280)
• תצוגות מקדימות של צבעים מוצגות עכשיו בצורה נכונה כשמציגים קובצי CSS בחלונית מקורות. בעבר, המיקומים שלהם לא היו נכונים. (1340062)
• הצגה עקבית של פריטים בפריסה גמישה ובפריסת רשת בשירות CSS בחלונית פריסה, וגם הצגה שלהם כתוויות בחלונית רכיבים. בעבר, הפריטים הגמישים והפריטים ברשת נעלמו באופן אקראי בשני המקומות. (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.

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

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