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

Jecelyn Yeen

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

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

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

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

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

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

בעיה ב-Chromium: 1257499

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

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

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

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

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

בעיה ב-Chromium: 1257499

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

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

בהקלטת ביצועים, לוחצים על תג ה-LCP בציר הזמן. בחלונית Details, אפשר לראות את ציון ה-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 (מטפלים בפרוטוקולים) דרך החלונית Application > Manifest. כאן אפשר להציג ולבדוק את כל הפרוטוקולים הזמינים.

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

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

בעיות ב-Chromium: 1300613

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1313690

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

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

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

ALT_TEXT_HERE

בעיה ב-Chromium: 1341255

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

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

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

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

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

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

בעיה ב-Chromium: 1334484

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

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

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

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

@היקף בכללים בחלונית &#39;סגנונות&#39;

בעיה ב-Chromium: 1337777

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

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

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

בעיה ב-Chromium: 1335338, 1333411

פרטים שונים

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

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

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

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

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

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

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

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 בוטל.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59