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

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

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

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

בעיה ב-Chromium: 1203241

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

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

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

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

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

בעיה ב-Chromium: 1076427

הרשאת צפייה בסדר המקור

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

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

בעיה ב-Chromium: 1094406

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

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

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

בעיה ב-Chromium: 1192084

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

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

בעיה ב-Chromium: 1141824

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

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

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

בעיה ב-Chromium: 1201398

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

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

בעיה ב-Chromium: 1103638

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

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

User-Agent Client Hints הם הרחבה חדשה של Client Hints API שמאפשרת למפתחים לגשת למידע על הדפדפן של המשתמש בצורה ארגונומית ושמירה על הפרטיות.

בעיה ב-Chromium: 1174299

דיווח על בעיות במצב תאימות (quirks mode) בכרטיסייה 'בעיות'

בכלי הפיתוח מדווחים עכשיו על בעיות במצב תאימות ובמצב תאימות מוגבלת.

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

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

בעיה ב-Chromium: 622660

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

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

בעיה ב-Chromium: 1199137

Lighthouse גרסה 7.5 בחלונית Lighthouse

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

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

בעיה ב-Chromium: 772558

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

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

בעיה ב-Chromium: 1203606

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

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

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

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

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

[ניסיוני] מכשיר להקלטה בובות

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

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

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

בעיה ב-Chromium: 1199787

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

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

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

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

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

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

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