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

Kayce Basques

התכונות החדשות והשינויים העיקריים שנוספו ל-DevTools בגרסה 61 של Chrome כוללים:

• סימולציה של ויסות נתונים במכשירים ניידים. אפשר להגדיר ויסות נתונים של המעבד (CPU) ושל הרשת בו-זמנית, כדי לדמות מכשירים ניידים ברמה בינונית או נמוכה.
• נפח האחסון בשימוש. אפשר לראות כמה נפח אחסון מקור מסוים תופס, עם פירוט לפי טכנולוגיה (IndexedDB, מטמון, מקומי, סשן וכו').
• חותמות זמן של מטמון. לראות מתי קובץ שירות (service worker) שמר תשובה במטמון.
• הפעלת מדד ה-FPS מתפריט הפקודות
• שינוי ההתנהגות של גלגל העכבר ולוח המגע בחלונית Performance
• ניפוי באגים במודולים של ES6 באופן מקורי.

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

סימולציה של מכשירים ניידים ברמת כניסה וברמה בינונית במצב המכשיר (Device Mode)

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

איור 1. תפריט ויסות הנתונים

איור 2. מעבירים את העכבר מעל התפריט Throttling או פותחים את התפריט Capture Settings כדי לראות את ההגדרות של Mid-tier mobile ושל Low-end mobile.

צפייה בניצול נפח האחסון

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

איור 3. בקטע Usage (שימוש) אפשר לראות ש-https://airhorner.com משתמש ב-66.9KB מתוך מכסת המקור של 15,214MB.

איך רואים מתי עובד שירות שמר תגובות במטמון

בעמודה החדשה Time Cached בכרטיסייה Cache Storage מוצג מתי ה-service worker שמר תשובות במטמון.

איור 4. העמודה Time Cached

הפעלת מדד ה-FPS מתפריט הפקודות

עכשיו אפשר להפעיל את מדד הפריימים לשנייה מתפריט הפקודות.

איור 5. הפעלת מדד ה-FPS מתפריט הפקודות

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

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

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

איור 6. ההגדרה פעולה של גלגלת העכבר בתרשים הלהבות

תמיכה בניפוי באגים במודולים של ES6

מודולים של ES6 נשלחים באופן מקורי ב-Chrome 61. אין הרבה מה לראות כאן בנוגע ל-DevTools, חוץ מזה שהניפוי באגים פועל כמו שציפיתם. כדי לראות בעצמכם, נסו להגדיר כמה נקודות עצירה ולעבור שלב-אחר-שלב ב-ES6-Module-implementation של פול איריש של TodoMVC.

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

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

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

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

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

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

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