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

Jecelyn Yeen

הפעלה חוזרת שלב אחרי שלב ב-Recorder

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

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

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

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

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

בעיה ב-Chromium: 1257499

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

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

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

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

תמיכה באירוע של העברת העכבר מעל האפליקציה Recorder

בעיה ב-Chromium: 1257499

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

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

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

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

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

בעיה ב-Chromium: 1326481

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

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

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

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

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

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

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

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

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

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

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

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

בעיות ב-Chromium: 1300613

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1313690

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

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

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

ALT_TEXT_HERE

בעיה ב-Chromium: 1341255

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

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

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

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

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

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

בעיה ב-Chromium: 1334484

הצגה ועריכה של כללי @scope at בחלונית הסגנונות

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

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

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

@scope at rules בחלונית &#39;סגנונות&#39;

בעיה ב-Chromium: 1337777

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

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

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

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

רגעי שיא שונים

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

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

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.