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

Jecelyn Yeen

עורך רשת CSS

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

עורך רשת CSS

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

בעיה ב-Chromium:‏ 1203241

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

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

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

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

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

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

בעיה ב-Chromium:‏ 1076427

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

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

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

סדר התוכן במסמך HTML חשוב לאופטימיזציה למנועי חיפוש (SEO) ולנגישות. התכונות החדשות יותר של 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.

תווית של Fetch/XHR

בעיה ב-Chromium:‏ 1201398

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

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

סינון לפי Wasm

בעיה ב-Chromium:‏ 1103638

איסוף נתונים מותנה באותות לסוכן המשתמש (UA-CH) למכשירים בכרטיסייה "תנאי הרשת"

איסוף נתונים מותנה באותות לסוכן המשתמש (UA-CH) חל עכשיו על מכשירים בשדה סוכן משתמש בכרטיסייה תנאי הרשת.

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

איסוף נתונים מותנה באותות לסוכן המשתמש (UA-CH) למכשירים בכרטיסייה "תנאי הרשת"

בעיה ב-Chromium:‏ 1174299

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

כלי הפיתוח מדווחים עכשיו על בעיות שקשורות למצב תאימות (quirks mode) ולמצב Quirks מוגבל.

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

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

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

בעיה ב-Chromium:‏ 622660

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

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

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

בעיה ב-Chromium:‏ 1199137

‫Lighthouse 7.5 בחלונית Lighthouse

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

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

בעיה ב-Chromium:‏ 772558

הוצאה משימוש של תפריט ההקשר "הפעלה מחדש של פריים" בסטאק הביצוע

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

תפריט ההקשר "הפעלה מחדש של פריים" הוצא משימוש

בעיה ב-Chromium:‏ 1203606

[ניסיוני] מעקב אחר פרוטוקולים

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

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

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

מעקב אחר פרוטוקולים

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

[תכונה ניסיונית] Puppeteer Recorder

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

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

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

Puppeteer Recorder

בעיה ב-Chromium:‏ 1199787

הורדת הערוצים בגרסת טרום-השקה (Preview)

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

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

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

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

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