מה חדש בכלי הפיתוח (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 קנוניות משוכפלות.

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

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

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

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

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

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

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

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

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

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

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