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

Jecelyn Yeen

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

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

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

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

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

בעיה ב-Chromium: ‏ 1257499

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

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

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

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

בעיה ב-Chromium: ‏ 1257499

המדד Largest Contentful Paint ‏ (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 קנוניות משוכפלות. בעבר, נקודות עצירה לא הופעלו בחלק מהקבצים בגלל כתובות URL קנוניות משוכפלות.

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

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

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

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

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

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• כדי לדווח על בעיה בכלי הפיתוח, לוחצים על more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי הפיתוח בכלי הפיתוח.
• שולחים ציוץ אל @ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים מה חדש בכלי הפיתוח של YouTube או טיפים לשימוש בכלי הפיתוח של YouTube.

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

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