תקציר של כלי הפיתוח, דצמבר 2013

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

העותק של כללי הסגנון הושבת כתגובה להערה

העתקת כללי CSS שלמים בחלונית 'סגנונות' תכלול עכשיו סגנונות שהשבתתם. הם יופיעו בלוח העריכה כעם הערה. [crbug.com/316532]

העתקה כנתיב CSS

האפשרות 'העתקה כנתיב CSS' זמינה עכשיו כפריט תפריט לצומתי DOM בחלונית 'רכיבים' (בדומה לפריט התפריט 'העתקת XPath').

העתקת נתיב ה-CSS.

יצירה של סלקטורים ב-CSS לא חייבת להיות מוגבלת לגיליונות הסגנונות או ל-JavaScript, והם יכולים גם לשמש כחלופות לאסטרטגיות של כלי האיתור בבדיקות של WebDriver. [crbug.com/277286]

הצגת סגנונות של רכיבי DOM של צל

עכשיו אפשר לבדוק את הסגנונות של אלמנטים צאצאים של שורש צל. [crbug.com/279390]

עותק() של המסוף פועל עבור אובייקטים

השיטה copy() מ-Command Line API פועלת עכשיו לאובייקטים. אפשר לנסות את copy({foo:'bar'}) בחלונית המסוף ולראות איך גרסה מודרנית ומעוצבת של האובייקט נמצאת עכשיו בלוח. [crbug.com/289348]

מסנן ביטוי רגולרי למסוף

סינון הודעות של המסוף באמצעות ביטויים רגולריים בחלונית המסוף. crbug.com/318308]

הסרה פשוטה של פונקציות event listener

אפשר לנסות את getEventListeners(document).mousewheel[0]; בחלונית המסוף כדי לאחזר את ההאזנה הראשונה לאירועי גלגל העכבר במסמך. כדי להמשיך מכאן, יש לנסות $_.remove(); כדי להסיר את ה-event listener ($_ = הערך של הביטוי האחרון שהוערך). crbug.com/309524]

הסרת אזהרות משירות ה-CSS

האזהרות בסגנון "ערך לא חוקי של מאפיין CSS" שהוצגו לכם הוסרו עכשיו. מאמצים מתמשכים לשיפור ההטמעה מול CSS בעולם האמיתי, כולל פריצות לדפדפן. crbug.com/309982]

פעולות בציר הזמן מסוכמות בתרשים עוגה

תרשים פעולות בציר הזמן

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

תגלו שחלק מהמידע שהיה מוצג בעבר בחלון קופץ קודם לחלונית נפרדת. כדי להציג, להתחיל הקלטה של ציר הזמן ולבחור פריים, בודקים את חלונית הפרטים החדשה, שמכילה תרשים עוגה. בתצוגת 'מסגרות', יוצגו נתונים סטטיסטיים מעניינים, כמו FPS ממוצע (1000ms/frame duration) לגבי הפריימים שנבחרו. [crbug.com/247786]

פרטי אירוע של שינוי גודל התמונה

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

פרטים על גודל התמונה

הקישור לכתובת URL של התמונה מעביר אתכם למשאב המתאים בחלונית המשאבים. crbug.com/244159]

מסגרות GPU

מסגרות שמופיעות ב-GPU מוצגות עכשיו בחלק העליון, מעל למסגרות ב-thread הראשי. crbug.com/305863]

הפסקות להאזנה ל-Popstate

'popstate' זמין עכשיו כנקודת עצירה (breakpoint) של event listener בסרגל הצד של החלונית 'מקורות'. [crbug.com/88112]

הגדרות הרינדור הזמינות בחלונית ההזזה

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

העתקת התמונה ככתובת URL של נתונים

העתקת התמונה ככתובת URL של נתונים

מעכשיו אפשר להעתיק את התוכן של נכסי תמונות בחלונית 'משאבים' כ-URI של נתונים (data:image/png;base64,iVBO...).

כדי לנסות זאת, עליכם למצוא את מקור התמונה בקטע 'מסגרות' > [משאב] > 'תמונות', ללחוץ לחיצה ימנית על התצוגה המקדימה של התמונה כדי לגשת לתפריט ההקשר, ולבחור באפשרות 'העתקת התמונה ככתובת URL של נתונים'. crbug.com/321132]

סינון URI של נתונים

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

סמל המשפך
כדי להציג סוגי מסננים אחרים של משאבים. crbug.com/313845]

סינון URI של נתונים

באגים בתזמון הרשת תוקנו

אם ראית את הורדת התמונה שנמשכת 300,000 שנים, סליחה. ;) התזמונים השגויים של משאבי הרשת תוקנו. crbug.com/309570]

להתנהגות של הקלטת הרשת יש יותר שליטה

ההתנהגות של רשת ההקלטה שונה מעט. קודם כול, לחצן ההקלטה פועל בדיוק כמו שהייתם מצפים מציר הזמן או מפרופיל המעבד (CPU). כמו כן, ניתן לצפות לזה: אם טוענים מחדש את הדף כשכלי הפיתוח פתוחים, הקלטת הרשת תתחיל באופן אוטומטי. לאחר מכן המערכת תכבה, כך שאם רוצים לתעד את הפעילות ברשת לאחר טעינת הדף, יש להפעיל אותה. כך קל יותר להציג את ה-Waterfall בלי שבקשות רשת מתנתקות מאוחרות, להטות את התוצאות. crbug.com/325878]

עיצובים של כלי פיתוח שזמינים עכשיו דרך תוספים

גיליונות סגנונות של משתמשים זמינים עכשיו דרך הניסויים בכלי הפיתוח (תיבת סימון: 'אפשר עיצובים מותאמים אישית של ממשק המשתמש') שמאפשרת לתוסף ל-Chrome להחיל עיצוב מותאם אישית על כלי הפיתוח. אפשר לראות דוגמה לתוסף העיצוב לדוגמה של כלי הפיתוח. crbug.com/318566]

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