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

Kayce Basques

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

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

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

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

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

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

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

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

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

לחלופין, לוחצים לחיצה ימנית על הצומת בעץ ה-DOM ובוחרים באפשרות אחסון כמשתנה גלובלי.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. קבלת הפניה לצומת.

   

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

2. מעבירים את הצומת כארגומנט הראשון אל monitorEvents().

   

   איור 18. העברת הצומת אל monitorEvents()

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

   

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

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

unmonitorEvents(temp1);

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

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

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

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

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

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

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

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

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

מה חדש בכלי הפיתוח

רשימה של כל מה שדיברנו עליו בסדרה מה חדש בכלי הפיתוח.