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

Jecelyn Yeen

עורך רשת CSS

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

עורך CSS Grid

כשמחילים את התג display: grid או display: inline-grid על רכיב HTML בדף, מופיע סמל לצד הרכיב בחלונית Styles. לוחצים על הסמל כדי להפעיל או להשבית את הכלי לעריכת רשת CSS. כאן אפשר לצפות בתצוגה מקדימה של השינויים הפוטנציאליים באמצעות הסמלים שעל המסך (לדוגמה, justify-content: space-around) ולשנות את מראה הרשת בלחיצה אחת בלבד.

בעיה ב-Chromium: ‏ 1203241

תמיכה בהצהרות חוזרות של const במסוף

ב-Console יש עכשיו תמיכה בהצהרה מחדש של משפט const, בנוסף להצהרות מחדש קיימות של let ו-class. העובדה שלא הייתה אפשרות להצהיר מחדש הייתה בעיה נפוצה למפתחי אתרים שהשתמשו במסוף כדי להתנסות בקוד JavaScript חדש.

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

דוגמה: יש תמיכה בהצהרה מחדש של משתנים בסקריפטים נפרדים של REPL (ראו את המשתנה a). שימו לב שהתרחישים הבאים לא נתמכים:const

  • const אסור להצהיר מחדש על סקריפטים של דפים בסקריפטים של REPL
  • אסור להצהיר מחדש על const באותו סקריפט REPL (הפניה למשתנה b)

הצהרות מחדש של const

בעיה ב-Chromium: ‏ 1076427

כלי להצגת סדר מקורות

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

כלי להצגת סדר מקורות

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

בעיה ב-Chromium: ‏ 1094406

קיצור דרך חדש להצגת פרטי המסגרת

כדי לראות את פרטי ה-iframe, לוחצים לחיצה ימנית על רכיב ה-iframe בחלונית Elements ובוחרים באפשרות Show frame details (הצגת פרטי המסגרת).

הצגת פרטי המסגרת

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

תצוגת פרטי המסגרת

בעיה ב-Chromium: ‏ 1192084

תמיכה משופרת בניפוי באגים של CORS

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

בעיות ב-CORS בכרטיסייה 'בעיות'

בעיה ב-Chromium: ‏ 1141824

עדכונים בחלונית 'רשת'

שינוי השם של תווית XHR ל-Fetch/XHR

השם של התווית XHR השתנה ל-Fetch/XHR. השינוי הזה מבהיר שהמסנן הזה כולל בקשות רשת של XMLHttpRequest ושל Fetch API.

תווית של אחזור/XHR

בעיה ב-Chromium: ‏ 1201398

סינון של סוג המשאב Wasm בחלונית 'רשת'

עכשיו אפשר ללחוץ על הלחצן החדש Wasm כדי לסנן את בקשות הרשת של Wasm.

סינון לפי Wasm

בעיה ב-Chromium: ‏ 1103638

רמזים על הלקוח (Client Hints) לגבי סוכן משתמש במכשירים בכרטיסייה 'תנאי הרשת'

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

אותות לסוכן המשתמש (UA-CH) הם הרחבה חדשה של Client Hints API, שמאפשרת למפתחים לגשת למידע על הדפדפן של המשתמש באופן ששומר על הפרטיות ונוח לשימוש.

רמזים על הלקוח (Client Hints) לגבי סוכן משתמש במכשירים בכרטיסייה 'תנאי הרשת'

בעיה ב-Chromium: ‏ 1174299

דיווח על בעיות במצב Quirks בכרטיסייה 'בעיות'

כלי הפיתוח מדווחים עכשיו על בעיות שקשורות למצב Quirks ולמצב Limited-quirks.

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

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

דיווח על בעיות במצב Quirks בכרטיסייה 'בעיות'

בעיה ב-Chromium: 622660

הכללת חישוב של צמתים בחלונית הביצועים

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

חישוב של צמתים בחלונית הביצועים

בעיה ב-Chromium: ‏ 1199137

‫Lighthouse 7.5 בחלונית Lighthouse

החלונית Lighthouse מריצה עכשיו את Lighthouse 7.5. האזהרה 'חסרים רוחב וגובה מפורשים' הוסרה עכשיו לגבי תמונות עם aspect-ratio שמוגדר ב-CSS. בעבר, Lighthouse הציג אזהרות לגבי תמונות שלא הוגדרו להן רוחב וגובה.

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

בעיה ב-Chromium: ‏ 772558

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

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

הוצאה משימוש של תפריט ההקשר 'הפעלה מחדש של המסגרת'

בעיה ב-Chromium: ‏ 1203606

‫[Experimental] מוניטור הפרוטוקול

כלי הפיתוח ל-Chrome משתמשים בפרוטוקול כלי הפיתוח ל-Chrome‏ (CDP) כדי לבצע אינסטרומנטציה, בדיקה, ניפוי באגים ופרופיל בדפדפני Chrome. הכלי Protocol monitor מאפשר לכם לראות את כל הבקשות והתשובות של CDP שנוצרו על ידי כלי הפיתוח.

נוספו שתי פונקציות חדשות כדי להקל על הבדיקה של CDP:

  • הלחצן החדש שמירה מאפשר להוריד את ההודעות המוקלטות כקובץ JSON
  • שדה חדש שמאפשר לשלוח פקודת CDP גולמית ישירות

מוניטור הפרוטוקול

בעיות ב-Chromium: ‏ 1204004, ‏ 1204466

‫[Experimental] Puppeteer Recorder

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

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

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

Puppeteer Recorder

בעיה ב-Chromium: ‏ 1199787

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

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

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

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

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

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