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

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

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

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

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

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

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

בעיה ב-Chromium: 1257499

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

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

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

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

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

בעיה ב-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 של פרוטוקולים בחלונית המניפסט

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

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

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

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

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

בעיות ב-Chromium: 1300613

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1313690

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

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

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

ALT_TEXT_HERE

בעיה ב-Chromium: 1341255

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

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

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

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

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

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

בעיה ב-Chromium: 1334484

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

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

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

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

@scope בכללים בחלונית הסגנונות

בעיה ב-Chromium: 1337777

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

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

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

בעיה ב-Chromium: 1335338, 1333411

דגשים שונים

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

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

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

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

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

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

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

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

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

Chrome 123

גרסה 122 של Chrome

גרסה 121 של Chrome

Chrome 120

גרסה 119 של Chrome

גרסה 118 של Chrome

גרסה 117 של Chrome

גרסה 116 של Chrome

Chrome 115

Chrome 114

גרסה 113 של Chrome

גרסה 112 של Chrome

גרסה 111 של Chrome

Chrome 110

Chrome 109

גרסה 108 של Chrome

גרסה 107 של Chrome

Chrome 106

Chrome 105

Chrome 104

גרסה 103 של Chrome

גרסה 102 של Chrome

גרסה 101 של Chrome

Chrome 100

גרסה 99 של Chrome

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

גרסה 92 של Chrome

גרסה 91 של Chrome

Chrome 90

גרסה 89 של Chrome

גרסה 88 של Chrome

גרסה 87 של Chrome

גרסה 86 של Chrome

גרסה Chrome 85

גרסה 84 של Chrome

גרסה 83 של Chrome

גרסה 82 של Chrome

Chrome 82 בוטל.

גרסה 81 של Chrome

גרסה 80 של Chrome

גרסה 79 של Chrome

גרסה 78 של Chrome

גרסה 77 של Chrome

גרסה 76 של Chrome

גרסה 75 של Chrome

גרסה 74 של Chrome

גרסה 73 של Chrome

גרסה 72 של Chrome

גרסה 71 של Chrome

גרסה 70 של Chrome

גרסה Chrome 68

Chrome גרסה 67

Chrome 66

גרסה Chrome 65

Chrome 64

Chrome 63

גרסה 62 של Chrome

גרסה 61 של Chrome

Chrome 60

Chrome 59