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

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

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

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

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

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

בעיה ב-Chromium: 1257499

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

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

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

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

בעיה ב-Chromium: 1257499

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

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

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

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

בעיה ב-Chromium: 1326481

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

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

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

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

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

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

עכשיו אפשר להשתמש בכלי פיתוח כדי לבדוק את הרישום של handler של פרוטוקול כתובת URL עבור Progressive Web Apps (PWA).

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

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

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

בעיות ב-Chromium: 1300613

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

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

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

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

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

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

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

בעיה ב-Chromium: 1313690

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

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

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

בעיה ב-Chromium: 1341255

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

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

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

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

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

בעיה ב-Chromium: 1334484

אפשר לראות ולערוך את @scope בכללים בחלונית 'סגנונות'

עכשיו אתם יכולים לראות ולערוך את הכללים הכלליים של CSS @scope בחלונית סגנונות.

הערך @scope בכללים הוא חלק מהמפרט של רמות מדורגות וירושה של CSS. הכללים האלה מאפשרים למפתחים להגדיר את ההיקף של כללי הסגנון ב-CSS.

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

בעיה ב-Chromium: 1337777

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

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

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

בעיה ב-Chromium: 1335338, 1333411

פרטים שונים

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

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

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

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

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

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

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

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

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