לאחרונה נוספו לכלים למפתחים ב-Chrome כמה תכונות מעודכנות – חלקן קטנות וחלקן גדולות. נתחיל עם העדכונים בחלונית הרכיבים ונמשיך לדבר על מסוף, ציר זמן ועוד.
העתקה של כללי סגנון מושבתים כפי שהם מופיעים בהערה
מעכשיו, העתקה של כללי CSS שלמים בחלונית 'סגנונות' תכלול סגנונות שהשבתה, והם יישארו בלוח כתגובה. [crbug.com/316532]
העתקה כנתיב CSS
'העתקה כנתיב CSS' זמין עכשיו כפריט תפריט לצמתי DOM בחלונית 'רכיבים' (בדומה לפריט התפריט 'העתקת XPath').
יצירת סלקטורים ב-CSS לא חייבת להיות מוגבלת לסגנונות ה-CSS או ל-JavaScript שלכם. הם יכולים לשמש גם כחלופות לאסטרטגיות לאיתור רכיבים בבדיקות WebDriver. [crbug.com/277286]
הצגת סגנונות של רכיבי Shadow DOM
עכשיו אפשר לבדוק את הסגנונות של רכיבי הצאצאים של שורש צללי. [crbug.com/279390]
הפונקציה copy() במסוף פועלת על אובייקטים
השיטה copy() מ-Command Line API פועלת עכשיו גם לאובייקטים. נסו להריץ את הפקודה copy({foo:'bar'}) בחלונית של מסוף הפקודה, ותראו שגרסת האובייקט שעברה עיבוד למחרוזת ופורמטה נמצאת עכשיו בלוח העריכה. [crbug.com/289348]
מסנן ביטוי רגולרי למסוף
סינון הודעות במסוף באמצעות ביטויים רגולריים בחלונית של מסוף Google. crbug.com/318308]
הסרה קלה של פונקציות event listener
אפשר לנסות את הפקודה getEventListeners(document).mousewheel[0]; בחלונית של מסוף Chrome כדי לאחזר את מאזין האירועים הראשון של גלגל העכבר במסמך. בהמשך לכך, אפשר לנסות את $_.remove(); כדי להסיר את מאזין האירועים הזה ($_ = הערך של הביטוי שהוערך לאחרונה). crbug.com/309524]
הסרת אזהרות CSS
אזהרות בסגנון 'Invalid CSS property value' (ערך לא חוקי של מאפיין CSS) שיכול להיות ראיתם הוסרו. אנחנו משקיעים מאמצים רבים כדי לשפר את ההטמעה מפני קוד CSS בעולם האמיתי, כולל פריצות בדפדפנים. crbug.com/309982]
סיכום הפעולות בציר הזמן בתרשים עוגה
לוח ציר הזמן מכיל עכשיו תרשים עוגה בחלונית הפרטים, שמראה באופן חזותי את המקור של עלויות העיבוד – כך תוכלו לזהות את נקודות החולשה במבט מהיר.
תגלו שחלק גדול מהמידע שהיה מוצג בחלונות קופצים הועבר לחלונית משלו. כדי להציג את הנתונים האלה, מתחילים הקלטה בציר הזמן ובוחרים פריים. שימו לב לחלונית הפרטים החדשה שמכילה תרשים עוגה. בתצוגת הפריימים יוצגו נתונים סטטיסטיים מעניינים, כמו FPS ממוצע (1000ms/frame duration) של הפריימים שנבחרו. [crbug.com/247786]
פרטי האירוע 'שינוי גודל של תמונה'
אירועי שינוי הגודל והפענוח של תמונות בחלונית ציר הזמן מכילים עכשיו קישור לצומת ה-DOM בחלונית הרכיבים.
הקישור לכתובת ה-URL של התמונה יעביר אתכם למשאב המתאים בחלונית המשאבים. crbug.com/244159]
פריימים של GPU
פריימים שמתרחשים ב-GPU מוצגים עכשיו בחלק העליון, מעל לפריימים בשרשור הראשי. crbug.com/305863]
הפסקה ב-popstate listeners
'popstate' זמין עכשיו כנקודה לניתוק בזמן ההפעלה של אירוע בחלונית הצדדית של חלונית המקורות. [crbug.com/88112]
הגדרות הרינדור שזמינות במגירה
כשפותחים את המגירה, מוצגות עכשיו כמה חלוניות, אחת מהן היא חלונית הרינדור. אפשר להשתמש בה כדי להציג מלבנים של צביעה, מדד FPS וכו'. האפשרות הזו מופעלת כברירת מחדל בקטע 'הגדרות' > 'הצגת התצוגה 'רינדור' במגירה של המסוף'.
העתקת התמונה ככתובת URL של נתונים
עכשיו אפשר להעתיק את התוכן של נכסי תמונות בחלונית 'משאבים' כURI של נתונים (data:image/png;base64,iVBO...).
כדי לנסות את זה, מחפשים את משאב התמונה בקטע Frames (מסגרות) > [Resource] (משאב) > Images (תמונות), לוחצים לחיצה ימנית על התצוגה המקדימה של התמונה כדי לגשת לתפריט ההקשר ובוחרים באפשרות 'העתקת התמונה ככתובת URL של נתונים'. crbug.com/321132]
סינון URI של נתונים
אם לעולם לא חשבתם שהם שייכים לכאן, עכשיו אפשר לסנן את URI של הנתונים בכרטיסייה 'רשת'. בוחרים בסמל המסנן.
תוקנו באגים שקשורים לתזמון של רשתות
אם נראה שההורדה של התמונה נמשכת 300,000 שנה, סליחה על כך. ;) עכשיו תוקנו התזמונים השגויים האלה של משאבי הרשת. crbug.com/309570]
יותר שליטה על התנהגות ההקלטה ברשת
ההתנהגות של רשת ההקלטה שונה במקצת. קודם כול, לחצן ההקלטה פועל בדיוק כמו שציפיתם שיפעל ב'ציר הזמן' או בפרופיל המעבד. כמובן, אם תטעינו מחדש את הדף בזמן שכלי הפיתוח פתוחים, התיעוד של תעבורת הנתונים יתחיל באופן אוטומטי. לאחר מכן הוא יושבת, כך שאם רוצים לתעד את פעילות הרשת אחרי טעינת הדף, צריך להפעיל אותו. כך קל יותר להציג גרפית את רשימת הרשתות, בלי שבקשות רשת שהתקבלו בשלב מאוחר יותר יגרמו לעיוות בתוצאות. crbug.com/325878]
עיצובים של DevTools זמינים עכשיו דרך תוספים
עכשיו אפשר להשתמש בגיליונות סגנונות של משתמשים באמצעות ניסויים של כלי הפיתוח (תיבת הסימון 'אישור שימוש בעיצובים מותאמים אישית של ממשק משתמש'), שמאפשרים לתוסף של Chrome להחיל עיצוב מותאם אישית על כלי הפיתוח. דוגמה לכך מופיעה במאמר תוסף נושא לדוגמה ל-DevTools. crbug.com/318566]
זהו סוף המהדורה הזו של סיכום DevTools. אם עדיין לא עשיתם זאת, כדאי לעיין במהדורה של נובמבר.