שלום לכולם, במהדורה הקודמת של 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]
פירוט של נתוני זיכרון לגבי תמונות מצב של הזיכרון
כשמציגים קובץ snapshot של אשכול שהוקלט, כדאי לשים לב לתרשים העוגה של הנתונים הסטטיסטיים. התרשים הזה מספק סקירה כללית חזותית לפי צבעים של ההיבט של JavaScript שצורך הכי הרבה זיכרון. נכון לעכשיו, תכונה ניסיונית היא להפעיל את 'נתונים סטטיסטיים של תמונת מצב של הזיכרון' כדי לנסות אותה. [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]
זה הכול בינתיים, תודה שקראת!