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

Kayce Basques

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

• הצגה חזותית של מדדי ביצועים בחלונית 'ביצועים'.
• הדגשת צמתי טקסט בעץ ה-DOM.
• מעתיקים את נתיב ה-JS לצומת DOM מעץ ה-DOM.
• עדכונים בחלונית Audits, כולל ביקורת חדשה שמזהה ספריות JS ומילות מפתח חדשות לגישה לחלונית Audits מתפריט הפקודות.

גרסת וידאו של נתוני הגרסה האלה

הדמיה של מדדי ביצועים

אחרי הקלטת טעינת דף, כלי הפיתוח מסמנים עכשיו מדדי ביצועים כמו DOMContentLoaded והצגת התוכן העיקרי (FMP) בקטע Timings.

איור 1. הצגת התוכן העיקרי (FMP) בקטע 'תזמון'

הדגשת צמתי טקסט

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

איור 2. הדגשה של צומת טקסט

העתקת נתיב JS

נניח שאתם כותבים בדיקת אוטומציה שכוללת קליק על צומת (באמצעות הפונקציה page.click() של Puppeteer, למשל) ואתם רוצים לקבל במהירות הפניה לצומת DOM הזה. תהליך העבודה הרגיל הוא לעבור לחלונית Elements (רכיבים), ללחוץ לחיצה ימנית על הצומת בעץ ה-DOM, לבחור באפשרות Copy (העתקה) > Copy selector (העתקת הסלקטור), ואז להעביר את הסלקטור ב-CSS אל document.querySelector(). אבל אם הצומת נמצא ב-Shadow DOM, הגישה הזו לא תעבוד כי הבורר יניב נתיב מתוך עץ הצל.

כדי לקבל במהירות הפניה לצומת DOM, לוחצים לחיצה ימנית על צומת ה-DOM ובוחרים באפשרות העתקה > העתקת נתיב JS. כלי הפיתוח מעתיקים ללוח הביטוי document.querySelector() שמצביע על הצומת. כמו שצוין למעלה, האפשרות הזו שימושית במיוחד כשעובדים עם Shadow DOM, אבל אפשר להשתמש בה לכל צומת DOM.

איור 3. העתקת נתיב JS

כלי הפיתוח מעתיקים ללוח ביטוי כמו זה שמופיע בהמשך:

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

עדכונים בחלונית הביקורות

החלונית Audits (ביקורות) מריצה עכשיו את Lighthouse 3.2. גרסה 3.2 כוללת בדיקה חדשה שנקראת ספריות JavaScript שזוהו. בביקורת הזו מפורטות ספריות ה-JS שזוהו בדף על ידי Lighthouse. אפשר למצוא את הביקורת הזו בדוח בקטע שיטות מומלצות > ביקורות שעברו.

איור 4. ספריות JavaScript שזוהו

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

איור 5. הקלדת lighthouse בתפריט הפקודות

הורדת ערוצי התצוגה המקדימה

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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