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

בקשות של ויסות נתונים (throttle) של WebSocket

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

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

הגבלת הקצב של בקשות WebSocket

בעיה ב-Chromium: 423246

חלונית חדשה של Reporting API בחלונית Application

בעזרת החלונית החדשה של Reporting API אפשר לעקוב אחרי הדוחות שנוצרו בדף ואחרי הסטטוס שלהם.

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

פותחים דף שמשתמש ב-Reporting API (למשל דף הדגמה). בחלונית Application, גוללים למטה לקטע Background services ובוחרים בחלונית Reporting API.

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

בקטע Endpoints מוצגת סקירה כללית של כל נקודות הקצה שהוגדרו בכותרת Reporting-Endpoints.

חלונית Reporting API

בעיה ב-Chromium: 1205856

התמיכה ממתינה עד שהרכיב יהיה גלוי או שניתן יהיה ללחוץ עליו בחלונית התיעוד

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

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

בעיה ב-Chromium: 1257499

שיפורים בעיצוב, בפורמט ובסינון של המסוף

עיצוב נכון של הודעות ביומן באמצעות קוד בריחה של ANSI

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

מפתחי Node.js נוהגים להוסיף צבע להודעות ביומן באמצעות רצפי בריחה של ANSI, לרוב בעזרת ספריות עיצוב כמו chalk,‏ colors,‏ ansi-colors,‏ kleur וכו'.

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

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

עיצוב מסוף

בעיות ב-Chromium: 1282837, ‏ 1282076

תמיכה נכונה במפרטי הפורמט %s, ‏ %d, ‏ %i ו-%f

המסוף מבצע עכשיו בצורה תקינה המרות מסוג %s, ‏ %d, ‏ %i ו-%f, כפי שמפורט בתקן של המסוף. בעבר, תוצאת השיחה לא הייתה עקבית.

תמיכה במפרטי פורמט בהודעות במסוף

בעיות ב-Chromium: 1277944, ‏ 1282076

מסנן קבוצות אינטואיטיבי יותר במסוף

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

בנוסף, אם מוצגת הודעה במסוף, גם הקבוצה (או קבוצת האב) שאליה היא שייכת מוצגת עכשיו.

מסנן קבוצות במסוף

בעיה ב-Chromium: 1068788

שיפורים במפות מקור

ניפוי באגים בתוסף ל-Chrome באמצעות קובצי מפת מקור

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

ניפוי באגים בתוסף ל-Chrome באמצעות קובצי מפת מקור

בעיה ב-Chromium: 212374

עץ משופר של תיקיות המקור בחלונית המקורות

עץ תיקיות המקור בחלונית מקורות משופר עכשיו יותר עם פחות עומס במבנים של התיקיות ובשמות (למשל '../', './' וכו'). בפועל, זוהי התוצאה של נורמליזציה של כתובות ה-URL המוחלטות של המקור במפות המקור.

עץ תיקיית מקור משופר בחלונית 'מקורות'

בעיה ב-Chromium: 1284737

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

קובצי מקור של Worker (למשל, Web worker, service worker) עם SourceURL יחסי מוצגים עכשיו בחלונית מקור. בעבר, לא הייתה טיפול תקין בקובצי המקור של ה-worker.

ALT_TEXT_HERE

בעיה ב-Chromium: 1277002

עדכונים של העיצוב הכהה האוטומטי ב-Chrome

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

בנוסף, כשהאפשרות עיצוב כהה אוטומטי מופעלת, התפריט הנפתח יצירת אמולציה של העדפת ערכת צבעים יושבת ויוגדר באופן אוטומטי ל-prefers-color-scheme: dark.

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

אמולציה של מצב כהה אוטומטי

בעיה ב-Chromium: 1243309

בוחר צבעים וחלונית מפוצלת ידידותית למגע

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

זו דוגמה שצולמה במסך המגע של מכשיר Google Pixelbook.

בעיות ב-Chromium: 1284245, ‏ 1284995

רגעי שיא שונים

ריכזנו כאן כמה תיקונים חשובים בגרסה הזו:

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

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

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

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

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

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