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

Jecelyn Yeen

עורך רשת CSS

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

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

בעיה ב-Chromium: ‏ 1203241

תמיכה בהצהרות חוזרות ב-Console‏ const

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

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

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

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

בעיה ב-Chromium: ‏ 1076427

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

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

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

בעיה ב-Chromium: ‏ 1094406

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

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

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

בעיה ב-Chromium: ‏ 1192084

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

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

בעיה ב-Chromium: ‏ 1141824

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

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

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

בעיה ב-Chromium: ‏ 1201398

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

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

בעיה ב-Chromium: ‏ 1103638

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

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

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

בעיה ב-Chromium: ‏ 1174299

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

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

מצב תאימות (quirks mode) ומצב תאימות מוגבלת (limited-quirks mode) הם מצבי דפדפן מדור קודם שקיימים עוד לפני שנוצרו תקני האינטרנט. ההתנהגויות האלה מחקות התנהגויות של פריסות מלפני התקופה של התקנים, ולעתים קרובות הן גורמות לאפקטים חזותיים לא צפויים.

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

בעיה ב-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. נוסף לחצן ייצוא חדש שמאפשר לייצא את השלבים כסקריפט Puppeteer.

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

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

בעיה ב-Chromium: ‏ 1199787

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

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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