דף זה תורגם על ידי Cloud Translation API.

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

Kayce Basques

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

מציבים את סמן העכבר מעל Live Expression כדי להדגיש צומת DOM
אחסון צומתי DOM כמשתנים גלובליים
מידע לגבי יוזם הפעולה ועדיפות הגרסה שלו נכללים עכשיו בייבוא ובייצוא של HAR
גישה לתפריט הפקודות מהתפריט הראשי
נקודות עצירה במצב 'תמונה בתוך תמונה'
(טיפ בונוס) הפעילו את MonitoringEvents() ב-Console כדי לצפות באירועים של רכיב מסוים

המשך לקרוא או צפה בגרסת הווידאו של הדף הזה:

כדי להדגיש צומת של DOM, יש להעביר את העכבר מעל 'ביטוי חי'

כשמתבצעת הערכה של Live Express לצומת DOM, יש להעביר את העכבר מעל התוצאה של Live Express כדי להדגיש את הצומת הזה באזור התצוגה.

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

איור 1. העברת העכבר מעל תוצאה של 'ביטוי חי' כדי להדגיש את הצומת באזור התצוגה

אחסון צומתי DOM כמשתנים גלובליים

כדי לאחסן צומת DOM כמשתנה גלובלי, מריצים ביטוי במסוף שמעריך את הצומת, לוחצים לחיצה ימנית על התוצאה ובוחרים באפשרות Store as global variable (אחסון כמשתנה גלובלי).

אחסון כמשתנה גלובלי במסוף.

איור 2. אחסון כמשתנה גלובלי במסוף

לחלופין, לוחצים לחיצה ימנית על הצומת ב-DOM Tree ובוחרים באפשרות Store as Global variable (אחסון כמשתנה גלובלי).

אחסון כמשתנה גלובלי בעץ DOM.

איור 3. אחסון כמשתנה גלובלי בעץ DOM

מידע על יוזמים ועדיפות נמצא כעת בייבוא וייצוא של HAR

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

ייצוא בקשות רשת לקובץ HAR.

איור 8. ייצוא בקשות רשת לקובץ HAR

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

כשמייצאים קובץ HAR, כלי הפיתוח כוללים עכשיו מידע על היוזם ופרטים בעדיפות גבוהה בקובץ ה-HAR. כשמייבאים קובצי HAR חזרה לכלי הפיתוח, העמודות Initiator ו-Priority מאוכלסות עכשיו.

השדה _initiator מספק הקשר נוסף לגבי הגורמים לבקשה למשאב. הפעולה הזו ממופה לעמודה יוזם בטבלה 'בקשות'.

עמודת היוזם.

איור 9. עמודת היוזם

אפשר גם להחזיק את Shift ולהעביר את העכבר מעל הבקשה כדי לראות את מיוזם הבקשה ואת יחסי התלות שלה.

הצגת גורמים יוזמים ויחסי תלות.

איור 10. הצגת הגורמים הפותחים ויחסי התלות

בשדה _priority מצוינת רמת העדיפות של הדפדפן שהקצה למשאב. הפעולה הזו ממופה לעמודה Priority (עדיפות) בטבלה Requests, שמוסתרת כברירת מחדל.

העמודה 'עדיפות'.

איור 11. העמודה 'עדיפות'

לוחצים לחיצה ימנית על הכותרת של הטבלה Requests ובוחרים באפשרות Priority (עדיפות) על מנת להציג את העמודה Priority.

איך להציג את העמודה 'עדיפות'.

איור 12. איך להציג את העמודה עדיפות

הערה: השדות _initiator ו-_priority מתחילים בקווים תחתונים, כי במפרט HAR מצוין ששדות בהתאמה אישית חייבים להתחיל בקווים תחתונים.

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

איור 13. תפריט הפקודות

עכשיו אפשר לפתוח את תפריט הפקודות מהתפריט הראשי. לוחצים על התפריט הראשי ובוחרים באפשרות Run command.

איור 14. פתיחת תפריט הפקודות מהתפריט הראשי

נקודות עצירה במצב 'תמונה בתוך תמונה'

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

צריך להפעיל את תיבות הסימון enterpictureinpicture, leavepictureinpicture ו-resize ב-Event Listener Breakpoints כדי להשהות את הפעולה בכל פעם שאחד מהאירועים האלה מסוג 'תמונה בתוך תמונה' מופעל. כלי הפיתוח מושהים בשורה הראשונה של ה-handler.

אירועים מסוג 'תמונה בתוך תמונה' בחלונית Event Listener Breakpoints.

איור 16. אירועים מסוג 'תמונה בתוך תמונה' בחלונית Event Listener Breakpoints

(טיפ בונוס) אפשר להפעיל את MonitoringEvents() ב-Console כדי לצפות באירועים של רכיב מסוים

נניח שאתם רוצים להוסיף גבול אדום מסביב ללחצן אחרי שמתמקדים בו ולוחצים על R, E, D, אבל אתם לא יודעים לאילו אירועים צריך להוסיף מאזינים. משתמשים ב-monitorEvents() כדי לרשום את כל האירועים של הרכיב במסוף.

אפשר לקבל הפניה לצומת.

איור 17. שימוש ב-Store כמשתנה גלובלי כדי לקבל הפניה לצומת
מעבירים את הצומת כארגומנט הראשון אל monitorEvents().

איור 18. מתבצעת העברה של הצומת אל monitorEvents()
אינטראקציה עם הצומת. כלי הפיתוח רושמים את כל האירועים של הצומת במסוף.

איור 19. האירועים של הצומת במסוף

צריך להתקשר אל unmonitorEvents() כדי להפסיק את הרישום של אירועים במסוף.

unmonitorEvents(temp1);

אפשר להעביר מערך כארגומנט השני ל-monitorEvents() אם רוצים לעקוב רק אחרי אירועים מסוימים או סוגים מסוימים של אירועים:

monitorEvents(temp1, ['mouse', 'focus']);

הסוג mouse מורה לכלי הפיתוח לרשום את כל האירועים שקשורים לעכבר, כמו mousedown ו-click. סוגים נתמכים נוספים הם key, touch ו-control.

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

הורדת הערוצים של התצוגה המקדימה

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

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

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

שלחו לנו הצעה או משוב דרך crbug.com.
כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות > עזרה > דיווח על בעיות בכלי הפיתוח בכלי הפיתוח.
אפשר לשלוח ציוץ אל @ChromeDevTools.
אפשר לכתוב תגובות לגבי 'מה חדש' בסרטוני YouTube בכלי הפיתוח או בסרטונים ב-YouTube בקטע 'טיפים לשימוש בכלי הפיתוח'.