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

Jecelyn Yeen

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1257499

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

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

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

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

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

בעיה ב-Chromium: ‏ 1257499

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

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

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

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

LCP בחלונית 'תובנות לגבי הביצועים'

בעיה ב-Chromium: ‏ 1326481

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

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

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

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

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.

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

בעיות ב-Chromium: 1300613

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1313690

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

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

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

ALT_TEXT_HERE

בעיה ב-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. לוחצים על הצהרת הכלל כדי לערוך אותה.

‫@scope at rules בחלונית Styles

בעיה ב-Chromium: ‏ 1337777

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

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

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

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

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

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

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

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

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

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

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

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

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