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

עורך רשתות CSS

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

עורך של רשתות CSS

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

בעיה ב-Chromium: 1203241

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

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

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

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

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

הצהרות חוזרות על const

בעיה ב-Chromium: 1076427

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

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

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

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

בעיה ב-Chromium: 1094406

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

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

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

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

תצוגת הפרטים של המסגרת

בעיה ב-Chromium: 1192084

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

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

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

בעיה ב-Chromium: 1141824

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

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

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

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

בעיה ב-Chromium: 1201398

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

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

סינון לפי Wasm

בעיה ב-Chromium: 1103638

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

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

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

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

בעיה ב-Chromium: 1174299

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

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

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

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

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

בעיה ב-Chromium: 622660

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

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

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

בעיה ב-Chromium: 1199137

Lighthouse 7.5 בחלונית של Lighthouse

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

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

בעיה ב-Chromium: 772558

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

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

תפריט ההקשר של Restart frame (הפעלה מחדש של המסגרת) הוצא משימוש

בעיה ב-Chromium: 1203606

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

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

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

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

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

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

[ניסיוני] Puppeteer Recorder

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

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

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

Puppeteer Recorder

בעיה ב-Chromium: 1199787

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.