שלום לכולם, במהדורה הקודמת של DevTools Digest התמקדנו ב-Asynchronous call stacks החזק ובעוד כמה תכונות. במהדורה הזו נציג סינון משופר של חלונית הרשת (עם השלמה אוטומטית), יכולות עריכה עם תוכן של Shadow DOM, עדכונים ל-CodeMirror 4 ועוד.
סינון בחלונית 'רשת'
עכשיו אפשר לסנן משאבים לפי שדות מסוימים, כמו דומיין. פורמט אחד של מסנן הוא: Domain:website.com. בנוסף לסינון, אתם מקבלים גם הצעות להשלמה אוטומטית של ערכי מסנן תקינים, שמתעדכנים בזמן אמת בזמן הקלדה של השאילתה. האפשרות הזו שימושית כשצריך למצוא את כל המשאבים שמוצגים על ידי דומיין מסוים. [crbubg.com/258421]
עריכת תוכן של Shadow DOM
תמיד היה אפשר לערוך HTML רגיל בחלונית 'רכיבים' בכלי הפיתוח, והיכולות האלה מורחבות עכשיו לרכיבים שנכללים ב-Shadow DOM. [crbug.com/348991]
שדרוג ל-CodeMirror 4.0
CodeMirror, תוכנת העריכה מבוססת-JavaScript שנעשה בה שימוש כחלק מחלונית המקורות, שודרגה לגרסה 4. כתוצאה מכך נוספו כמה פונקציות חדשות. crbug.com/356878]
חיפוש מהיר של מאפיין CSS
מעכשיו אפשר לחפש שמות של נכסים, ערכים או בוררי כללים באמצעות תיבת החיפוש החדשה בחלונית 'סגנונות'. התוצאות מודגשות בזמן אמת בזמן ההקלדה של השאילתה. [crbug.com/278852]
חותמות זמן לצד הודעות במסוף
כשרוצים לתעד הודעות ברצף מהיר, כדאי לראות את השעה המדויקת שבה ההודעה תועדה. אפשר להפעיל את האפשרות הזו באמצעות 'ניסויים' ב-DevTools. [crbug.com/131714]
פירוט של נתוני סטטיסטיקת הזיכרון בתמונות מצב של ערימות (heap snapshot)
כשמציגים קובץ snapshot של אשכול שהוקלט, כדאי לשים לב לתרשים העוגה של הנתונים הסטטיסטיים. התרשים הזה מספק סקירה כללית חזותית לפי צבעים של ההיבט של JavaScript שצורך הכי הרבה זיכרון. התכונה הזו עדיין נמצאת בגרסת ניסיון, ולכן צריך להפעיל את האפשרות 'נתונים סטטיסטיים של קובץ snapshot של Heap' כדי לנסות אותה. [crbug.com/346335]
הצגת המקור המקורי של console.log, ולא את הגרסה הארוזת
סביר להניח שיש לך פונקציית wrapper של console.log, אבל לצערנו, כל ההודעות ב-console מגיעות ממשהו כמו util.js:46. עכשיו אפשר לבקש מ-DevTools לפתור את המיקומים המקוריים. מזינים את הקובץ שמארז את ההודעות ביומן המסוף בתיבה 'דילוג על ניתוח מקורות עם שמות מסוימים' כדי ש-DevTools יטפל בו בתיבת שחורה ולאחר מכן יציג את המקור האמיתי של משפט ביומן. [crbug.com/231007]
עוד כמה תוספות קטנות אבל משמעותיות
מרעננים את החלונית Event Listeners בחלונית Elements אחרי שמוסיפים או מסירים באופן דינמי פונקציות event listener של JavaScript. [crbug.com/341044]
אפשר להשתמש ב-
Ctrl+כדי להעביר את המיקוד לקלט במסוף. יכול להיות שזה שימושי בתהליך עבודה שמבוסס על מקלדת בלבד בכלי הפיתוח. [crbug.com/144943]הצעות ההשלמה האוטומטית של border-style לערכים (קו מקווקו, קו מקווקו נטוי, קו כפול, חריץ) עודכנו בהתאם למפרט. [crbug.com/349998]
הוספנו לחלונית ההגדרות את הלחצן שחזור ברירות המחדל וטעינה מחדש, שמאפשר לעשות בדיוק את מה שהוא אומר. [crbug.com/135451]
התכונה הזו נמצאת כרגע בגרסת בטא, אבל אתם יכולים לנסות את האפשרות הצמדה לצד ימין כדי לבדוק אם היא מתאימה לתהליך העבודה שלכם. שאר מצבי הפריסה הם הצמדה לחלון הראשי (ימין או תחתית) וביטול ההצמדה ופתיחת חלון נפרד. [crbug.com/134282]
האירוע 'wheel' זמין עכשיו כנקודת עצירה של event listener, בנוסף לאירועים הרגילים click, mousemove, mousedown וכו'. [crbug.com/347562]
זה הכול בינתיים, תודה שקראת!